flutter - 如何在小部件底部显示 TabBar

Question

  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
            ],
          ),
        ),
      ],
    ),
  ),
);

我已经从 flutter 创建了小部件，但我无法在此小部件之后显示 TabBar。我已经看到了使用 DefaultTabController() 创建选项卡的基本方法，但是当我们在应用栏底部使用时它正在工作

Answer 1

您可以使用 NestedScrollView :

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')),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  )
)

结果: