如何在不使用appbar的情况下添加标签栏

我尝试重新创建此设计,但是未能在体内图像下方添加TabBar和TabBarView。

如何在不使用appbar的情况下添加标签栏

b1004940 回答:如何在不使用appbar的情况下添加标签栏

尝试一下

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

您可以轻松创建没有AppBar的TabBar。只需将Container作为父项即可。 请检查this

,

我举了一个简单的例子,看看它是否可以帮助您: 首先定义一个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,size: 20,Icon(Icons.menu,)
                          ],]),Container(
                    child: TabBar(
                    unselectedLabelColor: const Color(0xffacb3bf),tabs: tabs,labelStyle: TextStyle(color: Colors.orangeAccent,fontSize: 12),onTap: (index) {},body: TabBarView(
            controller: _tabController,children:
                tabs.map((tab) => _setDisplayContainer(tab.key)).toList()));
  }

希望这会有所帮助。

本文链接:https://www.f2er.com/3160056.html

大家都在问