SliverList 可以在 TabBarView 中使用，反之亦然？

Question

我正在尝试在TabBarView 中使用SliverList，但我不断收到这些 错误：

1. 断言失败：第 5966 行 pos 12：'child == _child'：不正确。
2. RenderRepaintBoundary 需要一个 RenderBox 类型的子级，但收到了一个 RenderSliv​​erFillRemainingWithScrollable 类型的子级。 这是代码。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MoboApp(),
    );
  }
}

class MoboApp extends StatefulWidget {
  @override
  _MoboAppState createState() => _MoboAppState();
}

class _MoboAppState extends State<MoboApp> with SingleTickerProviderStateMixin {
  
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              leading: Icon(
                Icons.list,
                color: Color(0xFFFBF3F3),
              ),
              actions: [
                Icon(
                  Icons.more_vert,
                  color: Color(0xFFFBF3F3),
                )
              ],
              title: Text(
                'mobo app',
                style: TextStyle(
                  color: Color(0xFFFBF3F3),
                  fontSize: 25.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              centerTitle: true,
              pinned: true,
              floating: false,
              expandedHeight: 100.0,
              bottom: TabBar(
                unselectedLabelColor: Color(0xFFE0A1A1),
                tabs: <Widget>[
                  Tab(
                    text: 'Home',
                  ),
                  Tab(
                    text: 'Feed',
                  ),
                  Tab(
                    text: 'Profile',
                  ),
                  Tab(
                    text: 'Setting',
                  )
                ],
              ),
              backgroundColor: Color(0xFFBB1A1A),
            ),
            TabBarView(
              children: [
                // FIRST TabBarView
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Image.network(
                                'https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Text('text'),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                // SECOND TabBarView
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Image.network(
                                'https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Text('text'),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                //THIRD TabBarView
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Image.network(
                                'https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Text('text'),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                //FOURTH TabBarView
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Image.network(
                                'https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Text('text'),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

所以...我尽量不要过多地更改您的代码:-)。此代码适用于 Android：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MoboApp(),
    );
  }
}

class MoboApp extends StatefulWidget {
  @override
  _MoboAppState createState() => _MoboAppState();
}

class _MoboAppState extends State<MoboApp> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Builder(builder: (BuildContext context) {
        return NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                leading: Icon(
                  Icons.list,
                  color: Color(0xFFFBF3F3),
                ),
                actions: [
                  Icon(
                    Icons.more_vert,
                    color: Color(0xFFFBF3F3),
                  )
                ],
                title: Text(
                  'mobo app',
                  style: TextStyle(
                    color: Color(0xFFFBF3F3),
                    fontSize: 25.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                centerTitle: true,
                pinned: true,
                floating: false,
                expandedHeight: 100.0,
                bottom: TabBar(
                  unselectedLabelColor: Color(0xFFE0A1A1),
                  tabs: <Widget>[
                    Tab(
                      text: 'Home',
                    ),
                    Tab(
                      text: 'Feed',
                    ),
                    Tab(
                      text: 'Profile',
                    ),
                    Tab(
                      text: 'Setting',
                    )
                  ],
                ),
                backgroundColor: Color(0xFFBB1A1A),
              ),
            ];
          },
          body: TabBarView(
            children: [
              // FIRST TabBarView
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Image.network('https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Text('text'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              // SECOND TabBarView
              CustomScrollView(
                slivers: [
                  SliverList(
                     delegate: SliverChildListDelegate(
                      [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Image.network('https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Text('text'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              //THIRD TabBarView
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Image.network('https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Text('text'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              //FOURTH TabBarView
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Image.network('https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Text('text'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        );
      }),
    );
  }
}