代码之家 › 专栏 › 技术社区 › nick coder

ListView。生成器未在列内滚动

dart flutter

nick coder · 技术社区 · 2 年前

我有 ListView.builder 内部可滚动 Column . 但是里面的内容 ListView。建设者 没有滚动。

final List<String> entries = <String>[
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
  'Item 5',
  'Item 6',
  'Item 7',
  'Item 8',
  'Item 9',
  'Item 10',
  'Item 11',
  'Item 12',
  'Item 13',
  'Item 14',
  'Item 15',
  'Item 16',
  'Item 17',
  'Item 18',
  'Item 19',
  'Item 20',
];
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Column(
      children: [
        Text(
          'Heading',
          style: TextStyle(fontSize: 24),
        ),
        ListView.builder(
          shrinkWrap: true,
          padding: const EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 150,
              width: 150,
              decoration: BoxDecoration(
                border: Border.all(width: 2.0, color: Colors.red),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Center(child: Text('${entries[index]}')),
            );
          },
        ),
        Text(
          'Footer',
          style: TextStyle(fontSize: 24),
        ),
      ],
    ),
  );
}

5 回复 | 直到 2 年前

Qaiser Hussain 2 年前

添加这行代码

physics: NeverScrollableScrollPhysics(),

Babacar NDONG 2 年前

将其添加到ListView。生成器()

physics: const ScrollPhysics(),
padding: EdgeInsets.zero,

Ivo 2 年前

我想提出一种不同的方法。这个 ListView 完全没有必要。您可以直接在列内的条目上循环。这还将考虑到您在容器中指示的150的宽度,而在ListView中没有这样做

Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Column(
      children: [
        Text(
          'Heading',
          style: TextStyle(fontSize: 24),
        ),
        for (String entry in entries) Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 150,
            width: 150,
            decoration: BoxDecoration(
              border: Border.all(width: 2.0, color: Colors.red),
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
            child: Center(child: Text(entry)),
          ),
        ),
        Text(
          'Footer',
          style: TextStyle(fontSize: 24),
        ),
      ],
    ),
  );
}

Marcel Dz 2 年前

只需将滚动方向添加到 ListView.builder()

ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.vertical, <- This is what you need
          padding: const EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 150,
              width: 150,
              decoration: BoxDecoration(
                border: Border.all(width: 2.0, color: Colors.red),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Center(child: Text('${entries[index]}')),
            );
          },
        ),

更多信息 here

Hossein Khoujani 2 年前

这对我有用

Column(
mainAxisSize: MainAxisSize.max, //Add this 
line onyour column
children:[
    SomeWidget(),
    Expanded(child:ListView.builder())
  ]
)