时间戳

首页 > 解决方案 > 如何自定义 TabBar 宽度以填充屏幕宽度？

flutter - 如何自定义 TabBar 宽度以填充屏幕宽度？

问题描述

在此处输入图像描述

我喜欢做这样的事情，标签的宽度应该是屏幕宽度的 1/3，我尝试 rwap 扩展小部件中的容器，但它不起作用，我尝试过，这是我的代码：

Container(
      decoration: new BoxDecoration(color: Color(0xff433579)),
      child: new TabBar(
        indicatorColor: Colors.transparent,
        controller: _controller,
        onTap: (index){
          setState(() {
            print(index);
            cureentIndex = index ;
          });
        },
        tabs: [
          Container(
            decoration: BoxDecoration(
              color: cureentIndex ==0 ? Color(0xff231751): Color(0xff433579),
              borderRadius: BorderRadius.only(
                topLeft: cureentIndex == 0 ? Radius.circular(0.0) : Radius.circular(20.0),
                topRight: cureentIndex == 0 ? Radius.circular(20.0) : Radius.circular(0.0),
                bottomLeft: cureentIndex == 0 ? Radius.circular(0.0) : Radius.circular(20.0),
                bottomRight: cureentIndex == 1 ? Radius.circular(20.0) : Radius.circular(20.0),
              )
            ),
            child: Column(
              children: [
                SvgPicture.asset('assets/images/sp_medatation.svg'),
                Text('Séances\nSophro',style: TextStyle(
                    color: Colors.white
                ),textAlign: TextAlign.center,)
              ],
            ),
          ),
          Container(
            decoration: BoxDecoration(
                color: cureentIndex ==1 ? Color(0xff231751): Color(0xff433579),
                borderRadius: BorderRadius.only(
                  topLeft: cureentIndex == 1 ? Radius.circular(20.0) : Radius.circular(20.0),
                  topRight: cureentIndex == 1 ? Radius.circular(20.0) : Radius.circular(20.0),
                  bottomLeft: cureentIndex == 0 ? Radius.circular(20.0) : Radius.circular(0.0),
                  bottomRight: cureentIndex == 2 ? Radius.circular(20.0) : Radius.circular(0.0),
                )
            ),
            child: Column(
              children: [
                SvgPicture.asset('assets/images/sp_book.svg'),
                Text('Histoires\net blagues',style: TextStyle(
                  color: Colors.white,
                ),)
              ],
            ),
          ),
          Container(
            decoration: BoxDecoration(
                color: cureentIndex ==2 ? Color(0xff231751): Color(0xff433579),
                borderRadius: BorderRadius.only(
                  topLeft: cureentIndex == 2 ? Radius.circular(20.0) : Radius.circular(0.0),
                  topRight: cureentIndex == 2 ? Radius.circular(0.0) : Radius.circular(0.0),
                  bottomLeft: cureentIndex == 1 ? Radius.circular(20.0) : Radius.circular(0.0),
                  bottomRight: cureentIndex == 2 ? Radius.circular(0.0) : Radius.circular(0.0),
                )
            ),
            child: Column(
              children: [
                SvgPicture.asset('assets/images/sp_music.svg'),
                Text('Music',style: TextStyle(
                  color: Colors.white,
                ),)
              ],
            ),
          ),
        ],
      ),
    ),

我明白了，这个选项卡不填满屏幕的宽度，如何自定义 TabBar itteam 来填满屏幕的宽度： 在此处输入图像描述

标签： flutterdartflutter-layoutflutter-animationflutter-test

解决方案

尝试这个

tabs: [
  Container(width:MediaQuery.of(context).size.width/3,child:YourWidget()),
  Container(width: MediaQuery.of(context).size.width/3,child:YourWidget()),
  Container(width: MediaQuery.of(context).size.width/3,child:YourWidget()),
 ]

或者试试这个它对我有用

body: Container(
                height: mediaQuerySize.height,
                child: DefaultTabController(
                  length: 3,
                  child: Column(
                    children: [
                      TabBar(
                        tabs: [
                          Padding(
                            padding: const EdgeInsets.only(top: 2.0),
                            child: Tab(
                              text: 'details',
                              icon: SvgPicture.asset(
                                'assets/icons/details.svg',
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 2.0),
                            child: Tab(
                              text: 'operation',
                              icon: SvgPicture.asset(
                                'assets/icons/operation.svg',
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 2.0),
                            child: Tab(
                              text: 'disease',
                              icon: SvgPicture.asset(
                                'assets/icons/plant_disease.svg',
                              ),
                            ),
                          ),
                        ],
                      ),
                      Expanded(
                        child: TabBarView(
                          physics: NeverScrollableScrollPhysics(),
                          children: [
                            PlantInfo(
                              plantModel: plantModel,
                            ),
                            PlantDetailOperation(
                              plantId: widget.plantId,
                            ),
                            PlantDetailDiseases(
                              plantId: widget.plantId,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),

推荐阅读