如何在 Flutter 中實現嵌套 ListView？

Question

實現嵌套 ListView 的首選方法是什么，或者換句話說，可以包含在可滾動父級中的 ListView 小部件？

想象一個“報告”頁面，其中一個部分是一個逐項列表。

Answer 1

對於子 ListView，使用該參數：

shrinkWrap: true,
physics: ClampingScrollPhysics(),

Answer 2

添加physics: ClampingScrollPhysics()和shrinkWrap: true對我shrinkWrap: true 。

示例代碼：

@override
Widget build(BuildContext context) {
  return Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          child: ListView.builder(
              shrinkWrap: true,
              itemCount: 123,
              itemBuilder: (BuildContext context, int index) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Parent'),
                    ListView.builder(
                        itemCount: 2,
                        physics: ClampingScrollPhysics(), 
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, int index) {
                          return Text('Child');
                        }),
                  ],
                );
              }),
        )
      ],
    ),
  );
}

Answer 3

如果你想讓內部 ListView 獨立於主滾動視圖滾動，你應該使用NestedScrollView 。 否則，請使用CustomScrollView 。

下面是一些說明NestedScrollView方法的代碼。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            new SliverAppBar(
              pinned: true,
              title: new Text('Flutter Demo'),
            ),
          ];
        },
        body: new Column(
          children: <Widget>[
            new FlutterLogo(size: 100.0, colors: Colors.purple),
            new Container(
              height: 300.0,
              child: new ListView.builder(
                itemCount: 60,
                itemBuilder: (BuildContext context, int index) {
                  return new Text('Item $index');
                },
              ),
            ),
            new FlutterLogo(size: 100.0, colors: Colors.orange),
          ],
        ),
      ),
    );
  }
}

Answer 4

截圖：

---

代碼：

var _container = Container(
  height: 200,
  color: Colors.blue,
  margin: EdgeInsets.symmetric(vertical: 10),
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("ListView")),
    body: Padding(
      padding: const EdgeInsets.all(40.0),
      child: ListView( // parent ListView
        children: <Widget>[
          _container,
          _container,
          Container(
            height: 200, // give it a fixed height constraint
            color: Colors.teal,
            // child ListView
            child: ListView.builder(itemBuilder: (_, i) => ListTile(title: Text("Item ${i}"))),
          ),
          _container,
          _container,
          _container,
        ],
      ),
    ),
  );
}

Answer 5

對於內部 Listview 我剛剛添加了下面的代碼，它為我解決了

shrinkWrap: true,
physics: ScrollPhysics(),

Answer 6

感謝 Serdar Polat：

ListView.builder( // outer ListView
  itemCount: 4,
  itemBuilder: (_, index) {
    return Column(
      children: [
        Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('Header $index'),
        ),
        ListView.builder( // inner ListView
          shrinkWrap: true, // 1st add
          physics: ClampingScrollPhysics(), // 2nd add
          itemCount: 10,
          itemBuilder: (_, index) => ListTile(title: Text('Item $index')),
        )
      ],
    );
  },
)