Добавить вертикальную линию в качестве разделителя на вкладке в качестве разделителя - PullRequest
Новая
       16

Добавить вертикальную линию в качестве разделителя на вкладке в качестве разделителя

1 голос
/ 09 июня 2019

У меня есть панель вкладок, и мне нужно поместить вертикальную линию в качестве разделителя между вкладками, как это сделать? Вот как я использовал мою вкладку: 

new TabBar(
                    unselectedLabelColor: Color.fromRGBO(119, 119, 119, 1),
                    labelColor: Colors.black,
                    controller: controller,
                    tabs: <Tab>[
                      new Tab(text: "Girls"),
                      new Tab(text: "Hero"),
                      new Tab(text: "Open"),
                    ]),

и мне нужно, чтобы это было так:

enter image description here

Ответы [ 3 ]

3 голосов
/ 10 июня 2019

Наконец-то это сработало для меня 

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)),
  ),
);

}

Output

2 голосов
/ 09 июня 2019

Все, что вам нужно, это 

indicator: BoxDecoration(
  border: Border(
    left: BorderSide(color: Colors.grey), // provides to left side
    right: BorderSide(color: Colors.grey), // for right side
  ),
),

Ваше решение: 

new TabBar(
  indicator: BoxDecoration(border: Border(right: BorderSide(color: Colors.orange))),
  unselectedLabelColor: Color.fromRGBO(119, 119, 119, 1),
  labelColor: Colors.black,
  controller: controller,
  tabs: <Tab>[
    new Tab(text: "Girls"),
    new Tab(text: "Hero"),
    new Tab(text: "Open"),
  ]),
0 голосов
/ 20 июня 2019

Для получения разделителя небольшого размера вы можете использовать это. 

Widget _individualTab(String imagePath) {
return Container(
  height: 50,
  width: double.infinity,
  decoration:  BoxDecoration(
    border: Border(right: BorderSide(color: STColors.LIGHT_BORDER,
        width: 0,
        style: BorderStyle.solid),
    ),
  ),
  child: Stack(children: <Widget>[
    Center(
        child: Tab(
          icon: ImageIcon(AssetImage(imagePath)),
        ),
    ),
    Align(
      alignment: Alignment.centerRight,
      child: Container(
        color: STColors.appBlackMedium,
        width: 1,
        height: 25,
      ),
    )
  ],)
);

}

...