Flutter 如何在小部件底部显示选项卡栏

我已经从flatter创建了这个小部件，但是我不能在这个小部件之后显示TabBar。我已经看到了使用DefaultTabController（）创建选项卡的基本方法，但是当我们在appbar的底部使用时，它是有效的

---

您可以使用底部导航栏

  Widget build(BuildContext context) {
return Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: [
        Container(
          color:Colors.blueGrey.shade900,
          width: double.infinity,
          height: MediaQuery.of(context).size.height * 0.15,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                Text("Available Balance     ₹ 10050", style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                ),),
                ],),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                RaisedButton(onPressed: () {}, color: Colors.teal, child: Text("Recharge", style: TextStyle(
                  color: Colors.white
                ),),),
                RaisedButton(onPressed: () {}, color: Colors.teal, child: Text("Read Rule", style: TextStyle(
                  color: Colors.white
                ),),),
                Icon(Icons.refresh_rounded, color: Colors.white,)
                ],),
              ),
              SizedBox(
                height: 5,
              ),
              // I need to insert the tabBarHere
            ],
          ),
        ),
      ],
    ),
  ),
);

class\u MyHomePageState扩展状态{
var selectedIndex=0；
无效已映射（整型索引）{
设置状态（）{
selectedIndex=索引；
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“数据”），
背景颜色：Colors.blueGrey.shade900，
操作：[图标（图标.通知）]，
),
抽屉：抽屉（），
底部导航栏：底部导航栏(
背景颜色：Colors.amber，
标高：12.0，
类型：BottomNavigationBarType.Shift，
项目：[
BottomNavigationBarItem（图标：icon（Icons.store），标题：Text（'Home'），
底部导航气压计(
图标：图标（Icons.warning），标题：文本（“warning”），
],
showUnselectedLabels:true，
currentIndex:selectedIndex，
unselectedItemColor:Colors.white，
fixedColor:Colors.teal，
onTap：未映射，
),
正文：SingleChildScrollView(
子：列(
儿童：[
容器(
颜色：Colors.blueGrey.shade900，
宽度：double.infinity，
高度：MediaQuery.of（上下文）.size.height*0.15，
子：列(
儿童：[
填充物(
填充：常数边集全部（8.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
正文(
“可用余额₹ 10050",
样式：TextStyle(
颜色：颜色，白色，
尺码：18，
),
),
],
),
),
填充物(
填充：常数边集全部（8.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
升起的按钮(
按下：（）{}，
颜色：Colors.teal，
子：文本(
“充电”，
样式：TextStyle（颜色：Colors.white），
),
),
升起的按钮(
按下：（）{}，
颜色：Colors.teal，
子：文本(
“阅读规则”，
样式：TextStyle（颜色：Colors.white），
),
),
图标(
图标。刷新，
颜色：颜色，白色，
)
],
),
),
大小盒子(
身高:5,，
),
//我需要在这里插入标签
],
),
),
],
),
),
);
}

您可以使用

嵌套滚动视图

：

class _MyHomePageState extends State<MyHomePage> {

  var selectedIndex = 0;

  void onItemTapped(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("data"),
        backgroundColor: Colors.blueGrey.shade900,
        actions: <Widget>[Icon(Icons.notifications)],
      ),
      drawer: Drawer(),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.amber,
        elevation: 12.0,
        type: BottomNavigationBarType.shifting,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.store), title: Text('Home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.warning), title: Text('Warning')),
        ],
        showUnselectedLabels: true,
        currentIndex: selectedIndex,
        unselectedItemColor: Colors.white,
        fixedColor: Colors.teal,
        onTap: onItemTapped,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              color: Colors.blueGrey.shade900,
              width: double.infinity,
              height: MediaQuery.of(context).size.height * 0.15,
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Text(
                          "Available Balance     ₹ 10050",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 18,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        RaisedButton(
                          onPressed: () {},
                          color: Colors.teal,
                          child: Text(
                            "Recharge",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        RaisedButton(
                          onPressed: () {},
                          color: Colors.teal,
                          child: Text(
                            "Read Rule",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        Icon(
                          Icons.refresh,
                          color: Colors.white,
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  // I need to insert the tabBarHere
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

脚手架(
正文：安全区(
子级：DefaultTabController(
长度：2，
子：嵌套滚动视图(
headerSliverBuilder：（构建上下文，布尔innerBoxScrolled）{
返回[
滑动双轴适配器(
子：容器(
颜色：Colors.blueGrey.shade900，
宽度：double.infinity，
高度：MediaQuery.of（上下文）.size.height*0.15，
子：列(
儿童：[
填充物(
填充：常数边集全部（8.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
正文(
“可用余额₹ 10050",
样式：TextStyle(
颜色：颜色，白色，
尺码：18，
),
),
],
),
),
填充物(
填充：常数边集全部（8.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceAround，
儿童：[
升起的按钮(
按下：（）{}，
颜色：Colors.teal，
子：文本(
“充电”，
样式：TextStyle（颜色：Colors.white），
),
),
升起的按钮(
按下：（）{}，
颜色：Colors.teal，
子：文本(
“阅读规则”，
样式：TextStyle（颜色：Colors.white），
),
),
图标(
图标。刷新，
颜色：颜色，白色，
)
],
),
),
大小盒子(
身高:5,，
),
],
),
),
),
Slivetroboxa
Scaffold(
  body: SafeArea(
    child: DefaultTabController(
      length: 2,
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
          return <Widget>[
            SliverToBoxAdapter(
              child: Container(
                color: Colors.blueGrey.shade900,
                width: double.infinity,
                height: MediaQuery.of(context).size.height * 0.15,
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text(
                            "Available Balance     ₹ 10050",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          RaisedButton(
                            onPressed: () {},
                            color: Colors.teal,
                            child: Text(
                              "Recharge",
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                          RaisedButton(
                            onPressed: () {},
                            color: Colors.teal,
                            child: Text(
                              "Read Rule",
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                          Icon(
                            Icons.refresh,
                            color: Colors.white,
                          )
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                  ],
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                color: Colors.blueGrey.shade900,
                child: TabBar(
                  tabs: <Widget>[
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 10.0),
                      child: Icon(Icons.card_giftcard),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 10.0),
                      child: Icon(Icons.store),
                    ),
                  ],
                ),
              ),
            ),
          ];
        },
        body: Column(
          children: <Widget>[
            Flexible(
              child: TabBarView(
                children: [
                  Center(child: Text('tab 1')),
                  Center(child: Text('tab 2')),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  )
)