Question

我试图通过以下方式创建嵌套的选项卡栏视图，方法是从外部选项卡视图返回包含另一个选项卡视图的列，但是它仅显示空白屏幕而不是第二个选项卡视图。我该如何解决？

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: DefaultTabController(length: 2, child: MyHomePage(title: '')),
    );
  }
}


class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;



 @override
  Widget build(BuildContext context){



   final view = LayoutBuilder(builder: (context, constraints){
       //created a widget here with content 
   });


   return Scaffold(

     appBar: AppBar(
       title: Text('Tab bar view'), bottom: TabBar(
         tabs: [
           Tab(icon: Icon(Icons.directions_car)),
           Tab(icon: Icon(Icons.directions_transit)),
         ]),
     ),

     body:  TabBarView(children: [DefaultTabController(length: 2, child: Column(
         children: <Widget>[TabBar(tabs: [Tab(text: 'Home'),Tab(text: 'News')
           , Container(child: TabBarView(

             children: <Widget>[ view, Icon(Icons.access_alarms)],
           ))])]
     ) ), Icon(Icons.directions_car)]));
 }

}

Answer 1

最好的方法，就像在Google Play商店中一样。

import 'package:flutter/material.dart';

class Locationstat extends StatefulWidget {
  @override
  _LocationstatState createState() => _LocationstatState();
}

class _LocationstatState extends State<Locationstat>
    with SingleTickerProviderStateMixin {
    TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: 2, vsync: this);
  }
  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: Text('Statistics'),

      bottom: TabBar(
            controller: _tabController,
            indicatorColor: Colors.orange,
            labelColor: Colors.orange,
            unselectedLabelColor: Colors.black54,
            tabs: <Widget>[
              Tab(
               text:('Pokhara Lekhnath'),
              ),
              Tab(
                 text:('Outside Pokhara-Lekhnath'),
              ),
            ]),
      ),
      body: TabBarView(
        children: <Widget>[
          NestedTabBar(),
          NestedTabBar(),

        ],
        controller: _tabController,
      ),
    );
  }
}




class NestedTabBar extends StatefulWidget {
  @override
  _NestedTabBarState createState() => _NestedTabBarState();
}
class _NestedTabBarState extends State<NestedTabBar>
    with TickerProviderStateMixin {
  TabController _nestedTabController;
  @override
  void initState() {
    super.initState();
    _nestedTabController = new TabController(length: 2, vsync: this);
  }
  @override
  void dispose() {
    super.dispose();
    _nestedTabController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        TabBar(
          controller: _nestedTabController,
          indicatorColor: Colors.orange,
          labelColor: Colors.orange,
          unselectedLabelColor: Colors.black54,
          isScrollable: true,
          tabs: <Widget>[
            Tab(
              text: "Inside Pokhara",
            ),
            Tab(
              text: "Outside Pokhara",
            ),

          ],
        ),
        Container(
          height: screenHeight * 0.70,
          margin: EdgeInsets.only(left: 16.0, right: 16.0),
          child: TabBarView(
            controller: _nestedTabController,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  color: Colors.blueGrey[300],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  color: Colors.blueGrey[300],
                ),
              ),

            ],
          ),
        )
      ],
    );
  }
}

Answer 2

根据official documentation，您需要用TabController包围appBar和body，而不仅是body部分。就像这个例子。

home: DefaultTabController(
    length: 3,
    child: Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        children: [
          Icon(Icons.directions_car),
          Icon(Icons.directions_transit),
          Icon(Icons.directions_bike),
        ],
      ),
    ),
  ),

Answer 3

您可以通过将BottomNavigationBar添加到Scaffold中并路由到包含TabBar的小部件来实现这一目的

Answer 4

检查一下，https://github.com/whatsupcoders/Flutter-Nested-Tabs

它有代码，其中包含 Google Play 商店的 UI 副本。

Here' the image

这是它的教程：https://www.youtube.com/watch?v=bSywfMPuwaw

干杯！

如何在另一个标签视图中使标签视图颤抖？

4 个答案: