Question

我有两个标签。我想要Appbar的高程底部和TabBarView的高程底部。我该怎么办？

这是我的代码，

class MyOrder extends StatefulWidget {
    @override
    _MyOrderState createState() => _MyOrderState();
}

class _MyOrderState extends State<MyOrder> with SingleTickerProviderStateMixin{
  var strTitle = Translations.globalTranslations.myOrders;
  TabController _tabController;

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

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(
        elevation: 1.0,
        leading:  new IconButton(
          icon: Image.asset('images/keyboard_backspace.png', width: 24.0, height: 24.0,),
          onPressed: () => Navigator.of(context).pop(),
        ),
          title: Text(strTitle,textAlign:  TextAlign.left , style: UIUtills().getTextStyle(
              fontName: AppFontName.appFontSemiBold,
              fontsize: 20,
              color: AppColor.redColor),),
          backgroundColor: Colors.white,
          iconTheme: IconThemeData(
            color: AppColor.redColor),
        bottom: TabBar(
          indicatorColor: AppColor.redColor,
          labelColor: AppColor.blackColor,
          labelStyle: UIUtills().getTextStyle(
              fontName: AppFontName.appFontSemiBold,
              fontsize: 16,
              color: AppColor.blackColor),
          tabs: [
            new Tab(text:Translations.globalTranslations.pastOrder),
            new Tab(text: Translations.globalTranslations.upComing)
          ],
          controller: _tabController,
          indicatorSize: TabBarIndicatorSize.tab),
      ),
      body: TabBarView(
        children: [
          PastOrder(),
          UpComingOrder(),
        ],
        controller: _tabController,),
    );
  }
}

根据我的代码布局， https://i.stack.imgur.com/D9BND.png

我想这样设计我的布局， https://i.stack.imgur.com/tPv8A.png

Answer 1

尝试这个

ScreenShot https://imgur.com/Fz95DEr

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
      elevation: 8.0, // top bar
        leading: InkWell(
         onTap: () {},
         child: Icon(
           Icons.keyboard_arrow_left,
           color: Colors.red,
         ),
       ),
       backgroundColor: Colors.white,
       title: Text(
         "My Order",
         style: TextStyle(color: Colors.red),
       ),
     ),
     body: Scaffold(
       body: DefaultTabController(
         length: 2,
         child: Scaffold(
           appBar: AppBar(
            elevation: 8.0, // bottom bar
             bottom: PreferredSize(
               child: TabBar(
                 labelColor: Colors.black,
                 indicatorColor: Colors.red,
                 tabs: <Widget>[
                   Tab(
                     text: "Past Order",
                   ),
                   Tab(
                     text: "Upcoming",
                   ),
                 ],
               ),
               preferredSize: Size.fromHeight(0.0),
             ),
             backgroundColor: Colors.white,
           ),
           body: TabBarView(
             children: <Widget>[
               Container(
                 color: Colors.white,
                 child: Center(
                   child: Text("Past Order"),
                 ),
               ),
               Container(
                 color: Colors.white,
                 child: Center(
                   child: Text("Upcoming"),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在AppBar和TabBarView下设置高程

1 个答案: