Question

    final List<Tab> myTabs = <Tab>[
    new Tab(text: 'a'),
    new Tab(text: 'b'),
    new Tab(text: 'c'),
    new Tab(text: 'd'),
    new Tab(text: 'e'),
  ];

然后

    appBar: new AppBar(
          elevation: 0,
          title: _barSearch(),
          backgroundColor: Colors.white,
          bottom: TabBar(
            isScrollable: true,
            tabs: myTabs,
            labelColor: Color(0xffFF645C),
            labelStyle:TextStyle(fontSize: 14.0),
            unselectedLabelStyle:TextStyle(fontSize: 14.0),
            unselectedLabelColor: Color(0xff343434),
            indicatorColor: Color(0xffFF645C),
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.only(bottom: 8.0),
          ),
        ),

它显示了我如何使用标签栏。但是现在，我发现我的Tabbar布局类似于spaceAround的布局。 enter image description here

但是我们的项目经理要求我使用spaceBetween。 enter image description here

Answer 1

在TabBar中无法进行间隔操作，但这是我实现目标的方法：

我将选项卡包装到Align Widget，因为tabs是Widget的列表，并进行相应的更改。您可以根据需要进行修改，甚至可以使用Positioned Widget来实现相同的目的

 tabs: [

       Align(alignment: Alignment.centerLeft,child: 
         Tab(icon: Icon(Icons.directions_transit)),
       ),
       Tab(icon: Icon(Icons.directions_transit)),
       Align(alignment: Alignment.centerRight,child: 
         Tab(icon: Icon(Icons.directions_transit)),
       ),
      ],

Answer 2

AppBar窗口小部件有时可能非常受限制。每次需要这种程度的自定义时，您都应该更喜欢分别构建此小部件并将其简单地添加到Scaffold下。

您可以通过以下几行代码来轻松实现此结果：

final List<Widget> myTabs = <Widget>[
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'a'),
  ),
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'b'),
  ),
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'c'),
  ),
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'd'),
  ),
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'e'),
  ),
];

class CustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          child: Center(child: Text('Coding24h')),
        ),
        Container(
          height: 50,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: myTabs,
          ),
        )
      ],
    );
  }
}

通过这种方式，您可以获得所需的完全自定义结果，而不受AppBar的限制。

Answer 3

你应该设置你的 isScrollable: false,

我希望它对你有用。

Flutter：布局如何像Tabbar之间的spaceBetween

3 个答案: