卡片小部件中的 TabBar 导航答案

【问题标题】：TabBar Navigation in a Card Widget卡片小部件中的 TabBar 导航
【发布时间】：2017-06-18 08:49:49
【问题描述】：

我有一个使用 Scaffold 和底部导航的主页。在脚手架的正文中，我有一个包含 2 个卡片小部件的页面。我正在尝试为独立于底部导航的第二张卡片实现“子”tabBar 导航。有没有办法为卡片小部件实现标签栏导航？我曾尝试使用 Scaffold，但标签栏高度太大。从文档来看，这似乎是由于flexiblespace Widget，但我还没有找到消除/缩放它的方法，将不胜感激。

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(home: new MyTabs()));
}

class MyTabs extends StatefulWidget {
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  TabController controller;

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

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text("Pages"),
            backgroundColor: Colors.deepOrange,
            ),
        bottomNavigationBar: new Material(
            color: Colors.deepOrange,
            child: new TabBar(controller: controller, tabs: <Tab>[
              new Tab(icon: new Icon(Icons.arrow_forward)),
              new Tab(icon: new Icon(Icons.arrow_downward)),
              new Tab(icon: new Icon(Icons.arrow_back)),
            ])),
        body: new TabBarView(controller: controller, children: <Widget>[
          new First(),
          new Second(),
          new Third()
        ]));
  }
}
class First extends StatefulWidget {
  @override
  FirstState createState() => new FirstState();
}

class FirstState extends State<First> with SingleTickerProviderStateMixin {
  TabController controller1;

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

  @override
  void dispose() {
    controller1.dispose();
    super.dispose();
  }



  @override
  Widget build(BuildContext context) {
    return new Column(children: [
      new Expanded(
        child: new Card(
            child: new Center(
                child: new Icon(Icons.favorite,
                    size: 150.0, color: Colors.redAccent))),
      ),
      new Expanded(child: new Card(
          child: new Center(
              child: new Container(
                  child: new Scaffold(
                      appBar: new AppBar(
                          bottom: new TabBar(
                              controller: controller1,
                              tabs: <Tab>[
                                new Tab(icon: new Icon(Icons.arrow_forward)),
                                new Tab(icon: new Icon(Icons.arrow_downward)),
                                new Tab(icon: new Icon(Icons.arrow_back)),
                              ]
                          )),
                      body: new TabBarView(
                          controller: controller1,
                          children: <Widget>[
                            new Text("Hello"),
                            new Text("world"),
                            new Text("Hi")
                          ]
                      )
                  )
              )
          ))),
    ]);
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
        child: new Center(
            child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent)
        )
    );
  }
}

class Third extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
        child: new Center(
            child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent)
        )
    );
  }
}

代码由here修改

【问题讨论】：

标签： dart flutter

【解决方案1】：

这段代码应该做你想做的事。您无需使用嵌套的Scaffold 或AppBar，只需一个简单的Column。

顺便说一句，您可能需要考虑 BottomNavigationBar，因为 TabBar 是一个 Material 小部件，通常出现在它正在导航的内容之上。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyTabs()));
}

class MyTabs extends StatefulWidget {
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  TabController controller;

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

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Pages"),
        backgroundColor: Colors.deepOrange,
      ),
      bottomNavigationBar: new Material(
        color: Colors.deepOrange,
        child: new TabBar(controller: controller, tabs: <Tab>[
          new Tab(icon: new Icon(Icons.arrow_forward)),
          new Tab(icon: new Icon(Icons.arrow_downward)),
          new Tab(icon: new Icon(Icons.arrow_back)),
        ])),
      body: new TabBarView(controller: controller, children: <Widget>[
        new First(),
        new Second(),
        new Third()
      ]));
  }
}

class First extends StatefulWidget {
  @override
  FirstState createState() => new FirstState();
}

class FirstState extends State<First> with SingleTickerProviderStateMixin {
  TabController controller1;

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

  @override
  void dispose() {
    controller1.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Column(children: [
      new Expanded(
        child: new Card(
          child: new Center(
            child: new Icon(Icons.favorite,
              size: 150.0, color: Colors.redAccent))),
      ),
      new Expanded(
        child: new Card(
          child: new Column(
            children: <Widget>[
              new Expanded(
                child: new TabBarView(
                  controller: controller1,
                  children: <Widget>[
                    new Text("Hello"),
                    new Text("world"),
                    new Text("Hi")
                  ]
                ),
              ),
              new Container(
                color: Colors.blue,
                child: new TabBar(
                  controller: controller1,
                  tabs: <Tab>[
                    new Tab(icon: new Icon(Icons.arrow_forward)),
                    new Tab(icon: new Icon(Icons.arrow_downward)),
                    new Tab(icon: new Icon(Icons.arrow_back)),
                  ]
                ),
              ),
            ],
          ),
        )
      ),
    ]);
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent)
      )
    );
  }
}

class Third extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent)
      )
    );
  }
}

【讨论】：