如何在选项卡栏中的两个选项卡之间添加分隔符-Flutter

Question

我想在两个选项卡之间添加分隔符，但我不知道该怎么做

我附上了如何在标签栏中添加分隔符的示例

Answer 1

装饰一下就可以了:

标签栏：

new TabBar(

          tabs: [
            _myTab('assets/icons/bottom_nav/Home.png'),
            _myTab('assets/icons/bottom_nav/Guys.png'),
            _myTab('assets/icons/bottom_nav/Notes.png'),
            Tab(
              icon: ImageIcon(AssetImage('assets/icons/bottom_nav/Email.png')),
            ),
          ],
          labelColor: STColors.PRIMARY_COLOR,
          unselectedLabelColor: Colors.grey,
          indicatorColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.tab,
          labelPadding: EdgeInsets.all(0),
          indicatorPadding: EdgeInsets.all(0),
        ),

我们的单个标签将是：

 Widget _myTab(String imagePath) {
     return   Container(
              height: 50 + MediaQuery
                  .of(context)
                  .padding
                  .bottom,
              padding: EdgeInsets.all(0),
              width: double.infinity,
              //---following decoration will add divider in between two tabs
              decoration:  BoxDecoration(border: Border(right: BorderSide(color: STColors.LIGHT_BORDER, width: 1, style: BorderStyle.solid))),
              child: Tab(
                icon: ImageIcon(AssetImage(imagePath)),
              ),
            );
    }

Answer 2

new TabBar(

      tabs: [
        _individualTab('assets/icons/bottom_nav/Home.png'),
        _individualTab('assets/icons/bottom_nav/Guys.png'),
        _individualTab('assets/icons/bottom_nav/Notes.png'),
        Tab(
          icon: ImageIcon(AssetImage('assets/icons/bottom_nav/Email.png')),
        ),
      ],
      labelColor: STColors.PRIMARY_COLOR,
      unselectedLabelColor: Colors.grey,
      indicatorColor: Colors.white,
      indicatorSize: TabBarIndicatorSize.tab,
      labelPadding: EdgeInsets.all(0),
      indicatorPadding: EdgeInsets.all(0),
    ),

个人选项卡

Widget _individualTab(String imagePath) {
return Container(
height: 50 + MediaQuery
  .of(context)
  .padding
  .bottom,
padding: EdgeInsets.all(0),
width: double.infinity,
decoration:BoxDecoration(border:Border(right:BorderSide(color:STColors.LIGHT_BORDER, width: 1, style: BorderStyle.solid))),
child: Tab(
icon: ImageIcon(AssetImage(imagePath)),
  ),
 );
}

Answer 3

标签栏

 new TabBar(

      tabs: [
        _designTab('assets/icons/bottom_nav/User.png'),
        _designTab('assets/icons/bottom_nav/Note.png'),
        _designTab('assets/icons/bottom_nav/card.png'),
        Tab(
          icon: ImageIcon(AssetImage('assets/icons/bottom_nav/Email.png')),
        ),
      ],
      labelColor: STColors.PRIMARY_COLOR,
      unselectedLabelColor: Colors.grey,
      indicatorColor: Colors.white,
      indicatorSize: TabBarIndicatorSize.tab,
      labelPadding: EdgeInsets.all(0),
      indicatorPadding: EdgeInsets.all(0),
    ),

使用以下功能的单标签设计

Widget _designTab(String imagePath) {
return Container(
 height: 50 + MediaQuery
  .of(context)
  .padding
  .bottom,
 padding: EdgeInsets.all(0),
 width: double.infinity,
 decoration:  BoxDecoration(border: Border(right: BorderSide(color: 
 STColors.LIGHT_BORDER, width: 1, style: BorderStyle.solid))),
child: Tab(
icon: ImageIcon(AssetImage(imagePath)),
),
);

如何在选项卡栏中的两个选项卡之间添加分隔符-Flutter

How to add divider between two tab in tab bar -Flutter

tabs

dart

flutter