flutter - 如何使用 tabBar 实现 sliverAppBar

Question

flutter 文档中展示了一个++ use的demo，有点复杂，不知道有没有简单明了的实现方式。我试过这个：SliverAppBarTabBarTabBarView with ListViewNestedScrollView

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

得到错误：

颤动：在构建 Scrollable(axisDirection: right,physics:
flutter: A RenderViewport 需要一个 RenderSliver 类型的子级，但接收到一个 _RenderExcludableScrollSemantics 类型的子级。
颤振：RenderObjects 期望特定类型的子级，因为它们在布局期间与它们的子级协调例如，RenderSliver 不能是 RenderBox 的子级，因为 RenderSliver 不理解 RenderBox 布局协议。

和

颤振：引发了另一个异常：'package:flutter/src/widgets/framework.dart'：断言失败：第 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

score 24 · 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(),
          ],
        ),
      ),
    ),
  );
}

score 6 · Accepted Answer

这是带有 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"),
             ],
            ),
          ),
        ],
      ),
    );
  }
}

score 1 · Accepted Answer

是的。您可以使用 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,
                ),
              ),
            ]),
          ),
        ],
      ),
    ),
  ),
);

} }

score 0 · Accepted Answer

如果你想使用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),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

score 0 · Accepted Answer

您还可以通过向 TabBar() 和 TabBarView 提供 _tabController 来实现它，这样它就会绑定。而对于 TabBarView 的孩子，如果你使用 ListView 则给它物理： 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),
        ],
      ),
    );
  }
}

flutter - 如何使用 tabBar 实现 sliverAppBar

5 回答 5

Related

Reference