关于 Flutter：Flutter – 可滚动页面中的 Listview


Flutter - Listview in scrollable Page

我想建立一个可滚动的页面，列出不同的小部件(在列表视图中)。基本上，我的想法是进行以下设置：

SingleChildScrollView (Container (Column (... Expanded(ListView))))

但这仅适用于容器的固定高度。有没有办法根据列表视图显示的小部件数量动态改变容器的高度？

PS：我使列表视图不可滚动，因为整个页面已经可以通过 SingleChildScrollView 滚动。

希望有人可以在这里提供帮助。

提前非常感谢，
尼古拉斯

代码：

1
2
3
4
5
6
7
8
9
10
class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
          child: Container(height: 2000, child:
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(child: PostList()),
],),),);}}

和：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class _PostListState extends State<PostList> {
  @override
  Widget build(BuildContext context) {    
    final postData = Provider.of<List<PostData>>(context) ?? [];    
    if (postData != null) {
      return ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        itemCount: postData.length,
        itemBuilder: (context, index) {
          return PostTile (postData: postData[index]);
        },);
    } else {
      return Text('loading'); // Check if necessary
}}}

相关讨论

如果你想要一个不同 ListView 的列表，试着把 shrinkWrap: true 放到你所有的 ListView 孩子中，然后添加 physics 到它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
ListView(
    shrinkWrap: false,
    physics: ClampingScrollPhysics(),
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListView.builder(
            itemCount: 3,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  title: Text(
                'Item #$index',
              ));
            },
          ),
          ListView.builder(
            itemCount: 6,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  leading: Icon(Icons.settings),
                  title: Text(
                    'SecondItem #$index',
                  ));
            },
          ),
          ListView.builder(
            itemCount: 6,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  dense: false,
                  trailing: Icon(Icons.settings),
                  title: Text(
                    'THIRD ITEM #$index',
                  ),
                  subtitle: Text(
                    'This is third item number $index',
                  ));
            },
          ),
        ],
      ),
    ],
  )

为了完成您在此处寻找的内容，您可能应该将 Listiew 更改为 Column 并删除 Container。

类似这样的东西：

1
2
3
4
5
6
7
8
9
class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
           PostList(),
],),);}}
1
2
3
4
5
6
7
8
9
10
11
class _PostListState extends State<PostList> {
  @override
  Widget build(BuildContext context) {    
    final postData = Provider.of<List<PostData>>(context) ?? [];    
    if (postData != null) {
      return Column(
        children: ...postData.map((el) => PostTile (postData: el))
      );
    } else {
      return Text('loading'); // Check if necessary
}}}
相关讨论