如何在屏幕中央创建标签栏？

Question

我在尝试使用 flutter 在屏幕中央创建一个标签栏时，我在一列中提供了 TabBarView，但我陷入了这个错误。请解决这个问题。

I/flutter ( 3983): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3983): The following assertion was thrown during performResize():
I/flutter ( 3983): Horizontal viewport was given unbounded height.
I/flutter ( 3983): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter ( 3983): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter ( 3983): vertical space in which to expand.

源代码是

class profilePage extends StatefulWidget {
  @override
  profilePageState createState() => profilePageState();
}

class profilePageState extends State<profilePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    _tabController = new TabController(length: 2, vsync: this);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Container(
            child: Column(crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  height: 40,
                ),DefaultTabController(
                  length: 2,
                  child: Column(children: [TabBar(
                      unselectedLabelColor: Colors.black,
                      labelColor: Colors.red,
                      tabs: <Widget>[
                        Tab(
                          icon: Icon(Icons.people),
                        ),
                        Tab(
                          icon: Icon(Icons.person),
                        )
                      ],controller: _tabController,
                      indicatorSize: TabBarIndicatorSize.tab,
                    ),TabBarView(
                      children: <Widget>[Text('people'), Text('Person')],
                      controller: _tabController,
                    ),
                  ]),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

你可以看到我想要实现的图像的上述模型。我已经尝试了很多东西，但我一直卡在这里。

如何纠正此错误以及如何在屏幕中央创建标签栏？

Answer 1

我添加了一个你想要得到的演示（我按照你发布的图片）：

注意：我不得不对您排列小部件树的方式进行一些更改。

class profilePage extends StatefulWidget {
  @override
  profilePageState createState() => profilePageState();
}

class profilePageState extends State<profilePage> {
 
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            'My Profile',
          ),
          centerTitle: true,
          backgroundColor: Colors.grey[700].withOpacity(0.4),
          elevation: 0,
          // give the app bar rounded corners
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20.0),
              bottomRight: Radius.circular(20.0),
            ),
          ),
          leading: Icon(
            Icons.menu,
          ),
        ),
        body: Column(
          children: <Widget>[
            // construct the profile details widget here
            SizedBox(
              height: 180,
              child: Center(
                child: Text(
                  'Profile Details Goes here',
                ),
              ),
            ),

            // the tab bar with two items
            SizedBox(
              height: 50,
              child: AppBar(
                bottom: TabBar(
                  tabs: [
                    Tab(
                      icon: Icon(Icons.directions_bike),
                    ),
                    Tab(
                      icon: Icon(
                        Icons.directions_car,
                      ),
                    ),
                  ],
                ),
              ),
            ),

            // create widgets for each tab bar here
            Expanded(
              child: TabBarView(
                children: [
                  // first tab bar view widget
                  Container(
                     color: Colors.red,
                    child: Center(
                      child: Text(
                        'Bike',
                      ),
                    ),
                  ),

                  // second tab bar viiew widget
                  Container(
                     color: Colors.pink,
                    child: Center(
                      child: Text(
                        'Car',
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出：

Answer 2

要将 TabBar 置于屏幕中央，您的 Profile Container 的高度应为屏幕高度除以 2

像这样

class profilePage extends StatefulWidget {
  @override
  profilePageState createState() => profilePageState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: MediaQuery.of(context).size.height /2,
              child: Center(child: Text("Profile"),),
              color: Colors.blue,
            ),
            TabBar(
              unselectedLabelColor: Colors.black,
              labelColor: Colors.red,
              tabs: [
                Tab(
                  icon: Icon(Icons.people),
                ),
                Tab(
                  icon: Icon(Icons.person),
                )
              ],
              controller: _tabController,
              indicatorSize: TabBarIndicatorSize.tab,
            ),
            Expanded(
              child: TabBarView(
                children: [Text('people'), Text('Person')],
                controller: _tabController,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

结果：

Answer 3

也可以试试这个，

AppBar(
          leading: IconButton(
            constraints: BoxConstraints(),
            padding: EdgeInsets.zero,
            icon: Container(
              padding: EdgeInsets.fromLTRB(10, 5, 0, 5),
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(20)),
                // color: MyColors.primaryColorLight.withAlpha(20),
                color: Colors.white,
              ),
              child: Icon(
                Icons.arrow_back_ios,
                color: kPrimaryColor,
                // size: 16,
              ),
            ),
            onPressed: () => Navigator.of(context).pop(),
          ),
          backgroundColor: kPrimaryColor,
          toolbarHeight: 80,
          elevation: 5.0,
          title: TabBar(//Add tab bar to title
            indicator: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(30)),
                color: Colors.white),
            labelColor: kPrimaryColor,
            unselectedLabelColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            isScrollable: true,
            tabs: [
              Container(
                height: 30.0,
                width: 100,
                child: Tab(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "Ongoing",
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                ),
              ),
              Container(
                width: 100,
                height: 30.0,
                child: Tab(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "Requests",
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                ),
              ),
            ],
          ),
        )

如何在屏幕中央创建标签栏？

How to create a tab bar at center of the screen in flutter?

tabbar

dart

flutter