flutter - 我想放置一个自定义小部件来代替 appbar，并希望在它下面有一个标签视图

Question

我已经构建了一个自定义小部件（“cab”），它显示了一个帐户登录圈，没有。用户拥有的点数。我想要一个标签视图就在它下面。现在我已将此自定义小部件放置在选项卡本身内：

bottomNavigationBar: Material(child: TabBar(
           tabs: const <Widget>[
            Tab( icon: Icon(Icons.add)),
          Tab( icon: Icon(Icons.search))
          ]
      ),),


       body :TabBarView(
        children: <Widget>[
          Column(
            children: <Widget>[
              cab
            ],
          ), 

但我希望这个小部件显示在选项卡视图上方，而不是选项卡视图本身的一部分。我怎样才能做到这一点？谢谢。

标签： flutterflutter-layout

Answer 1

将 AppBar 小部件替换为您自己的小部件，如下所示：

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          bottomNavigationBar: TabBar(
            labelColor: Colors.orange,
            unselectedLabelColor: Colors.grey,
            indicatorSize: TabBarIndicatorSize.tab,
            indicatorColor: Colors.orange,
            tabs: [
              Tab(
                icon: Icon(Icons.add),
              ),
              Tab(
                icon: Icon(Icons.search),
              ),
            ],
          ),
          body: Column(
            children: <Widget>[
              // Remove the AppBar code below and put your "cab" widget
              AppBar(
                primary: true,
                title: Text('Here is your cab'),
                centerTitle: true,
                backgroundColor: Colors.orange,
              ),
              Expanded(
                child: TabBarView(
                  children: [
                    Icon(Icons.add),
                    Icon(Icons.search),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}