ScrollView flutter 内的垂直 ListView

Question

我的 UI 用例类似于 Instagram 用户个人资料。

我在顶部有多个小部件，在下面有一个无限的ListView.builder和项目。 我想滚动滚动视图中的所有内容，但ScrollView视图不能包含无限列表。

我该如何处理 Flutter 中的这种情况？

Answer 1

使用 CustomScrollView 是解决方案

在这里，我为您完成了基本实现：

class MainBody extends StatefulWidget {
  MainBody({Key key}) : super(key: key);

  @override
  _MainBodyState createState() => _MainBodyState();
}

class _MainBodyState extends State<MainBody> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Expanded(
                            child: Container(
                              height: 100,
                              width: 100,
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle, color: Colors.green),
                              child: Center(child: Text("ProfileImage")),
                            ),
                            flex: 1,
                          ),
                          Expanded(flex: 2, child: Text("Profile Statistics"))
                        ],
                      ),
                      Text("Bio"),
                      Text("Some Buttons"),
                      Text("Story Highlights"),
                    ])),
          ),
          SliverToBoxAdapter(
            child: Container(
                height: 150,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    itemBuilder: (context, index) {
                      return Container(
                        margin: const EdgeInsets.all(10),
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle, color: Colors.red),
                        child: Center(child: Text((index + 1).toString())),
                      );
                    })),
          ),
          SliverAppBar(
            centerTitle: false,
            pinned: true,
            flexibleSpace: DefaultTabController(
              initialIndex: 0,
              length: 2,
              child: TabBar(tabs: [
                Center(child: Text("Icon1")),
                Center(child: Text("Icon2")),
              ]),
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.all(8),
            sliver: SliverList(
                delegate: SliverChildBuilderDelegate(
                    (context, index) => Container(
                        height: 30,
                        child: Center(child: Text("Hey" + index.toString()))),
                    childCount: 20)),
          )
        ],
      ),
    );
  }
}

可以进行进一步的增强