У меня есть функция панели вкладок, в которой я показываю диаграмму пончика и список транспортных средств, но мне нужно показать, какую вкладку выбрал для этого пользователь. У меня есть indicatorColor в TabBar, но мне нужно заполнить линией градиента, как показано на изображении, пожалуйста, помогите мне вне.

PS: Если возможно, дайте мне знать, как задать основной цвет темы в основном как градиент ???

return Scaffold(
    body: new DefaultTabController(
        length: 2,
        child: new Column(
          children: <Widget>[
            new Container(
              width: 1200.0,
              child: new Container(
                color: Colors.white,
                child: new TabBar(
                  labelColor: Colors.black,
                  tabs: [
                    Tab(
                      child: new Text("Visual",
                      style: new TextStyle(fontSize: 20.0)
                      ),
                    ),

                    Tab(
                      child: new Text("Tabular",
                      style: new TextStyle(fontSize: 20.0)), 
                    ),
                  ],
                ),
              ),
            ),
            new Expanded(
              child: new TabBarView(
                children: [
                  Tab(
                    child: new RefreshIndicator(
                      child: new Text('DONUT CHART'),
                      onRefresh: refreshList,
                      key: refreshKey1,
                    ),
                  ),
                  Tab(
                    child: new RefreshIndicator(
                      child: new Text('List of vehicles'),
                      onRefresh: refreshList,
                      key: refreshKey2,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

enter image description here

enter image description here

3
Harsha Vardhan 23 Окт 2018 в 13:02

2 ответа

Лучший ответ

Я думаю, что единственный способ - создать свой собственный TabBar. Вы можете скопировать код TabBar из tabs.dart, а в _TabBarState вы должны изменить Decoration get _indicator.

Что-то вроде:

return ShapeDecoration(shape: UnderlineInputBorder(), gradient: LinearGradient(
    colors: [Colors.blue, Colors.green]));

< Сильный > UPD :

Понял. ShapeDecoration не работает. С его помощью я могу установить градиент для всей вкладки. Для подчеркивания - в этом же файле есть класс _IndicatorPainter. И есть метод этого класса Rect indicatorRect.

return Rect.fromLTWH(tabLeft, 0.0, tabRight - tabLeft, tabBarSize.height);

Эта строка возвращает прямоугольник для украшения. Если его изменить - можно получить подчеркивание:

return Rect.fromLTWH(tabLeft, tabBarSize.height - 4.0, tabRight - tabLeft, 4.0);

И внутри Decoration get _indicator не забудьте заменить return UnderlineTabIndicator на

return ShapeDecoration(shape: RoundedRectangleBorder(), gradient: LinearGradient(
    colors: [Colors.blue, Colors.green]));

И вот результат введите описание изображения здесь

2
Andrey Turkovsky 24 Окт 2018 в 12:39

Вместо того, чтобы менять основные файлы, это лучший ответ, который сработал для меня.

TabBar(
          controller: tabController,
          indicatorPadding: EdgeInsets.all(0.0),
          indicatorWeight: 4.0,
          labelPadding: EdgeInsets.only(left: 0.0, right: 0.0),
          indicator: ShapeDecoration(
              shape: UnderlineInputBorder(
                  borderSide: BorderSide(
                      color: Colors.transparent,
                      width: 4.0,
                      style: BorderStyle.solid)),
              gradient: LinearGradient(colors: [pinkLight, pinkDark])),
          tabs: <Widget>[
            Center(
              child: Container(
                alignment: Alignment.center,
                color: whiteColor,
                child: Text(
                  "Rating",
                  style: themeData.accentTextTheme.title,
                ),
              ),
            ),
            Container(
              alignment: Alignment.center,
              color: whiteColor,
              child: Text(
                "Category",
                style: themeData.accentTextTheme.title,
              ),
            ),
            Container(
              alignment: Alignment.center,
              color: whiteColor,
              child: Text(
                "Friend",
                style: themeData.accentTextTheme.title,
              ),
            ),
          ],
        ),

Сделайте заполнение индикатора равным нулю, заполнение метки равным нулю, а индикаторВес индикатора - 4.0 или ваш требуемый размер, после этого вместо использования текста во вкладках используйте Контейнер вверху и придайте ему цвет.

3
Genchi Genbutsu 9 Май 2019 в 12:07
52946317