如何实现带有TabBar的SliverAppBar

Question

如何实现带有TabBar的SliverAppBar

27

Flutter文档展示了一个使用NestedScrollView的SliverAppBar+TabBar+TabBarView with ListView的演示，但这有点复杂，我想知道是否有更简单清晰的实现方法。我尝试了以下代码：

CustomScrollView
  slivers:
    SliverAPPBar
      bottom: TabBar
    TabBarView
      children: MyWidget(list or plain widget)

出现错误：

Flutter: 在构建Scrollable(axisDirection: right, physics:
Flutter: A RenderViewport期望被子元素为RenderSliver类型，但接收到的是_RenderExcludableScrollSemantics类型.
Flutter: 渲染对象需要特定类型的子元素，因为它们在布局和绘制时需要与子元素协调。例如，一个RenderSliver不能成为RenderBox的子元素，因为RenderSliver不理解RenderBox的布局协议。

并且

Flutter: 另外一个异常被抛出：'package:flutter/src/widgets/framework.dart': Failed assertion: line 3497 pos 14: 'owner._debugCurrentBuildTarget == this': 不为真。

这是我的代码:

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyScrollTabListApp());
}

class MyScrollTabListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "aa", home: MyScrollTabListHomePage());
  }
}

class MyScrollTabListHomePage extends StatefulWidget {
  @override
  MyScrollTabListHomePageState createState() {
    return new MyScrollTabListHomePageState();
  }
}

class MyScrollTabListHomePageState extends State<MyScrollTabListHomePage>
    with SingleTickerProviderStateMixin {
  final int _listItemCount = 300;
  final int _tabCount = 8;
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: _tabCount, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 240.0,
            title: Text("Title"),
            pinned: true,
            bottom: TabBar(
              controller: _tabController,
              isScrollable: true,
              tabs: List<Tab>.generate(_tabCount, (int i) {
                return Tab(text: "TAB$i");
              }),
            ),
          ),
          TabBarView(
            controller: _tabController,
            children: List<Widget>.generate(_tabCount, (int i) {
              return Text('line $i');
            }),
          ),
        ],
      ),
    );
  }
}

而官方演示则使用以下这种结构

DefaultTabController
    NestedScrollView
      headerSliverBuilder
        SliverOverlapAbsorber
          handle
          SliverAppBar
        TabBarView
          CustomScrollView
            SliverOverlapInjector
              handle
              SliverPadding

- walker

请查看此处的答案：https://dev59.com/alUL5IYBdhLWcg3wYXJ8#50853287 - diegoveloper

5个回答

5

这是一个带有SilverAppBar的TabView示例。

class SilverAppBarWithTabBarScreen extends StatefulWidget {
  @override
  _SilverAppBarWithTabBarState createState() => _SilverAppBarWithTabBarState();
}

class _SilverAppBarWithTabBarState extends State<SilverAppBarWithTabBarScreen>
    with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = new TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new CustomScrollView(
        slivers: <Widget>[
          new SliverAppBar(
            title: Text("Silver AppBar With ToolBar"),
            pinned: true,
            expandedHeight: 160.0,
            bottom: new TabBar(
              tabs: [
                new Tab(text: 'Tab 1'),
                new Tab(text: 'Tab 2'),
                new Tab(text: 'Tab 3'),
              ],
              controller: controller,
            ),
          ),
          new SliverList(
          new SliverFillRemaining(
        child: TabBarView(
          controller: controller,
          children: <Widget>[
               Text("Tab 1"),
               Text("Tab 2"),
               Text("Tab 3"),
             ],
            ),
          ),
        ],
      ),
    );
  }
}

- Dhiraj Sharma

是的，正如@Negora所说，没有TabBarView，当标签在页眉底部更改时，页面主体不会更改。 - walker

2

@DhirajSharma 代码中的 new SliverList( new SliverFillRemaining(...)，似乎 SliverList 没有这样一个构造函数，可以直接将 SliverFillRemaining 作为参数传递。 - walker

3

@DhirajSharma 我们的问题是每个“TabView”都包含一个银片列表（即可滚动小部件），而不是简单的小部件。 - walker

2

是的。您可以使用NestedScrollView来实现选项卡。以下是一些额外的代码。

class AppView extends StatelessWidget {
final double _minValue = 8.0;

@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;

return Scaffold(
  appBar: MyAppBar(),
  drawer: DrawerDialog(),
  body: DefaultTabController(
    length: 3,
    child: SafeArea(
      child: NestedScrollView(
        body: TabBarView(
          children: [Text("Page 1"), Text("Page 2"), Text("Page 3")],
        ),
        headerSliverBuilder:
            (BuildContext context, bool innerBoxIsScrolled) => [
          SliverPadding(
            padding: EdgeInsets.all(_minValue * 2.5),
            sliver: SliverToBoxAdapter(
              child: Text(
                "Hiding Header",
                style: textTheme.headline6,
                textAlign: TextAlign.center,
              ),
            ),
          ),
          SliverAppBar(
            backgroundColor: Colors.grey[100],
            pinned: true,
            elevation: 12.0,
            leading: Container(),
            titleSpacing: 0.0,
            toolbarHeight: 10,
            bottom: TabBar(tabs: [
              Tab(
                child: Text(
                  "All",
                  style: textTheme.subtitle2,
                ),
              ),
              Tab(
                child: Text(
                  "Categories",
                  style: textTheme.subtitle2,
                ),
              ),
              Tab(
                child: Text(
                  "Upcoming",
                  style: textTheme.subtitle2,
                ),
              ),
            ]),
          ),
        ],
      ),
    ),
  ),
);

} }

- Girix Code

1

如果您想使用CustomScrollView，可以利用SliverToBoxAdapter：

Widget build(BuildContext context) {
  return Scaffold(
    body: DefaultTabController(
      length: 2,
      child: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text('SliverAppBar'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.call), text: "Call"),
                Tab(icon: Icon(Icons.message), text: "Message"),
              ],
            ),
          ),
          SliverToBoxAdapter(
            child: SizedBox(
              height: MediaQuery.of(context).size.height,
              child: TabBarView(
                children: [
                  Container(color: Colors.red),
                  Container(color: Colors.blue),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

- CopsOnRoad

0

您还可以通过将_tabController提供给TabBar()和TabBarView来实现绑定。如果您正在使用ListView作为TabBarView的子项，则请给它添加physics: NeverScrollablePhysics()，以便它不会移动。请注意，您必须为ListView的容器提供动态高度，以便它加载所有子项。

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    _tabController = TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: [
        SliverAppBar(
          floating: true,
          expandedHeight: 50,
          title: Column(
            children: [
              Row(
                children: [
                  Text('Hello, User'),
                  Spacer(),
                  InkWell(
                    child: Icon(Icons.map_rounded),
                  ),
                
                ],
              ),
            ],
          ),
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          _tabSection(context),
        ])),
      ],
    ));
  }

  Widget _tabSection(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    double mainAxisHeight = height > width ? height : width;
    return DefaultTabController(
        length: 2,
        child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
          Container(
            height: 48,
            decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(10),
                    bottomLeft: Radius.circular(10))),
            child: TabBar(
                indicatorColor: Colors.white,
                indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(color: Colors.white, width: 5.0),
                  insets: EdgeInsets.symmetric(horizontal: 40),
                ),
                labelColor: Colors.white,
                unselectedLabelColor: Colors.grey[300],
                tabs: [
                  Tab(
                    iconMargin: EdgeInsets.only(top: 5),
                    text: "Tab Bar 1",
                  ),
                  Tab(
                    iconMargin: EdgeInsets.only(top: 5),
                    text: "Tab bar 2",
                  ),
                ]),
          ),
          
          Container(
                height: 200 * 6 // 200 will be Card Size and 6 is number of Cards
              child: TabBarView(controller: _tabController, children: [
                tabDetails(),
                tabDetails(),
              ]))
        ]));
  }

  tabDetails() {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    double mainAxisHeight = height > width ? height : width;
    return Container(
    
      padding: EdgeInsets.symmetric(horizontal: 15),
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
     
            Colors.red[100],
            Colors.red[200],
          ])),
      child: ListView(
        physics: NeverScrollableScrollPhysics(),  // This will disable LitView'Scroll so only Scroll is possible by TabBarView Scroll.
        children: [
          SizedBox(height: 10),        
          Container(
          height:140,
            width: width,
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: 6,
              itemBuilder: (BuildContext context, int indexChild) {
                return Row(
                  children: [
                    MyListTile(
                      name: "Name",
                   
                    ),
                    SizedBox(width: 5),
                  ],
                );
              },
            ),
          ),
        
       
          SizedBox(height: 1000),
        ],
      ),
    );
  }
}

- Juned Raza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CopsOnRoad · Accepted Answer

使用 NestedScrollView，这里是可运行的代码。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: DefaultTabController(
      length: 2,
      child: NestedScrollView(
        headerSliverBuilder: (context, value) {
          return [
            SliverAppBar(
              bottom: TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.call), text: "Call"),
                  Tab(icon: Icon(Icons.message), text: "Message"),
                ],
              ),
            ),
          ];
        },
        body: TabBarView(
          children: [
            CallPage(),
            MessagePage(),
          ],
        ),
      ),
    ),
  );
}