如何在flutter中添加没有appbar的tabbar

Question

我尝试重新创建此设计，但未能在主体内的图像下方添加 TabBar 和 TabBarView .

Answer 1

Expanded(
  child: DefaultTabController(
    length: 3,
    child: new Scaffold(
      appBar: new PreferredSize(
        preferredSize:
            Size.fromHeight(MediaQuery.of(context).size.height),
        child: new Container(
          height: 50.0,
          child: new TabBar(
            labelColor: Colors.black,
            isScrollable: true,
            tabs: [
              Tab(
                text: "Tab 1",
              ),
              Tab(
                text: "Tab 2",
              ),
              Tab(
                text: "Tab 3",
              ),
            ],
          ),
        ),
      ),
      body: TabBarView(
        children: [
          Icon(Icons.directions_car),
          Icon(Icons.directions_transit),
          Icon(Icons.directions_bike),
        ],
      ),
    ),
  ),
)

Answer 2

我举了一个简单的例子，看看它是否可以帮助你： 首先定义一个 Statefull 小部件并添加一些关于您的选项卡的定义

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

定义小部件的状态

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin { 
TabController _tabController;
  final List<Tab> tabs = [
    Tab(
      ///Give  keys so you can make it easier to retrieve content to display, if you have to read the data from a remote resource ...
      key: ObjectKey(1),
      text: 'Products',
    ),
    Tab(
      key: ObjectKey(2),
      text: 'Feature',
    ),
    Tab(
      key: ObjectKey(3),
      text: 'Shipping Info',
    ),
    Tab(
      key: ObjectKey(4),
      text: 'Reviews',
    ),
  ];
///Build the widget for each tab ...
  Widget _setDisplayContainer(key) {
    if (key == ObjectKey(1)) {
      return Text("Content for tab 1");
    } else if (key == ObjectKey(2)) {
      return Text("Content for tab 2");
    } else if (key == ObjectKey(3)) {
      return Text("Content for tab 3");
    }
    return Text("Content for tab 4");
  }

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

在这之后你的构建方法应该是这样的

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: PreferredSize(
          preferredSize: Size(MediaQuery.of(context).size.width,
              MediaQuery.of(context).size.height * .4),
          child: SafeArea(
            child: Column(
              children: <Widget>[
                Container(
                  child: Expanded(
                    flex: 4,
                    child: Stack(fit: StackFit.loose, children: <Widget>[
                      Container(
                        decoration: BoxDecoration(
                            image: DecorationImage(
                          image: AssetImage('images/car.jpeg'),
                          fit: BoxFit.cover,
                        )),
                      ),
                      Container(
                        height: 40,
                        color: Colors.orangeAccent,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Icon(Icons.arrow_back,
                                color: Colors.white, size: 20),
                            Row(
                              children: <Widget>[
                                Icon(
                                  Icons.search,
                                  color: Colors.white,
                                  size: 20,
                                ),
                                Icon(Icons.menu, color: Colors.white, size: 20),
                              ],
                            )
                          ],
                        ),
                      ),
                    ]),
                  ),
                ),
                  Container(
                    child: TabBar(
                    unselectedLabelColor: const Color(0xffacb3bf),
                    indicatorColor: Color(0xFFffac81),
                    labelColor: Colors.black,
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicatorWeight: 3.0,
                    indicatorPadding: EdgeInsets.all(10),
                      tabs: tabs,
                      controller: _tabController,
                      labelStyle: TextStyle(color: Colors.orangeAccent, fontSize: 12),
                      onTap: (index) {},
                    ),
                  ),
              ],
            ),
          ),
        ),
        body: TabBarView(
            controller: _tabController,
            children:
                tabs.map((tab) => _setDisplayContainer(tab.key)).toList()));
  }

希望这会有所帮助。

Answer 3

您可以在没有 AppBar 的情况下轻松创建 TabBar。只需使用 Container 作为父级。 请查看this。

Answer 4

试试这个

class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
 }

class _DemoState extends State<Demo>
 with TickerProviderStateMixin {
TabController _tabController;

@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(length: 2, vsync: this);
}

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

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  body:Column(
    children: <Widget>[
      Image.asset("path"),
      Container(child:
      Column(
              children: <Widget>[
                Container(
                  height: 60,
                  margin: EdgeInsets.only(left: 60),
                  child: TabBar(
                    tabs: [
                      Container(
                        width: 70.0,
                        child: new Text(
                          'Tab1',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                      Container(
                        width: 75.0,
                        child: new Text(
                          'Tab2',
                          style: TextStyle(fontSize: 20),
                        ),
                      )
                    ],
                    unselectedLabelColor: const Color(0xffacb3bf),
                    indicatorColor: Color(0xFFffac81),
                    labelColor: Colors.black,
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicatorWeight: 3.0,
                    indicatorPadding: EdgeInsets.all(10),
                    isScrollable: false,
                    controller: _tabController,
                  ),
                ),
                Container(
                  height: 100,
                  child: TabBarView(
                      controller: _tabController,
                      children: <Widget>[
                        Container(
                          child: Text("login"),
                        ),
                        Container(
                          child: Text("sign up"),
                        )
                      ]),
                ))
              ],
            ),
    ],
  )
 );
}