есть ли способ создать разноцветную панель вкладок во flutter?

ProgramBox

есть ли способ создать разноцветную панель вкладок во flutter?

Post author:admin
Запись опубликована:3 мая, 2023
Post category:Вопросы по программированию

#dart #flutter #tabs

#dart #flutter #вкладки

Вопрос:

Привет, я все еще новичок в flutter и изучаю его уже около недели, в настоящее время я создаю приложение, которое организует средства для составления бюджета, я пытаюсь создать разноцветную панель вкладок, чтобы пользователи могли легко идентифицировать свои средства, я пытался выполнить поиск по сети и прочитать документацию по вкладкам, но все еще безуспешно, есть какие-нибудь советы?

~ редактировать

Чего я пытаюсь добиться, так это добиться того, чтобы цвет фона каждой панели вкладок совпадал с цветом фона scaffold, цвет фона панели вкладок по умолчанию в настоящее время серый, он должен быть красным на первой вкладке, синим на второй вкладке, желтым на третьей вкладке. возможно ли это?

вот скриншот в эмуляторе: скриншот

вот пример моего кода:

/main.dart

 import 'package:flutter/material.dart';
import './FirstTab.dart' as first;
import './SecondTab.dart' as second;
import 'ThirdTab.dart' as third;

void main(){
  runApp(new MaterialApp(
    home: new MyTabs()
  ));
}

class MyTabs extends StatefulWidget{
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {


  TabController controller;

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Multi Colored Tab Bar'),
        backgroundColor: Colors.grey,
        bottom: new TabBar(
          controller: controller,
          tabs: <Tab>[
            new Tab(text: 'First Tab'),
            new Tab(text: 'Second Tab'),
            new Tab(text: 'Third Tab'),
          ],
        ),
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new first.First(),
          new second.Second(),
          new third.Third(),
        ],
      ),
    );
  }
}

/FirstTab.dart

 import 'package:flutter/material.dart';

class First extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.red
    );
  }
}

/ SecondTab.dart

 import 'package:flutter/material.dart';

class Second extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.blue
    );
  }
}

/ThirdTab.dart

 import 'package:flutter/material.dart';

class Third extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.yellow
    );
  }
}

1. Привет, Джанг! можете ли вы показать нам код, в котором вы пробовали?

2. Какую разноцветную вы предпочитаете? Несколько цветных разделов, цветовой оттенок, переключение цветов?

3. привет, спасибо за ответ, я добавил несколько подробных объяснений и несколько кодов, извините за путаницу.

Ответ №1:

Да, это возможно, попробуйте это

 import 'package:flutter/material.dart';
import './FirstTab.dart' as first;
import './SecondTab.dart' as second;
import 'ThirdTab.dart' as third;

void main(){
  runApp(new MaterialApp(
      home: new MyTabs()
  ));
}

class MyTabs extends StatefulWidget{
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {


  TabController controller;
  int tabIndex =0 ;

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Multi Colored Tab Bar'),
        backgroundColor: Colors.grey,
        bottom: new TabBar(
          controller: controller,
          indicator: BoxDecoration(color: setColor(tabIndex)),
          onTap: (index){
            setState(() {
              tabIndex = index;
            });
          },
          tabs: <Tab>[
            new Tab(text: 'First Tab'),
            new Tab(text: 'Second Tab'),
            new Tab(text: 'Third Tab'),
          ],
        ),
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new first.First(),
          new second.Second(),
          new third.Third(),
        ],
      ),
    );
  }

  setColor(int tabIndex){
    if(tabIndex == 0){
      return Colors.red;
    }else if(tabIndex == 1){
      return Colors.blue;
    }else if(tabIndex == 2){
      return Colors.yellow;
    }
  }
}

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

Ответ №2:

Приведенный ниже Scaffold цвет будет автоматически установлен при загрузке, и вкладки будут отражать соответствующие цвета по умолчанию.

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TabBarApp(),
    );
  }
}

class TabBarApp extends StatefulWidget {
  createState() => _TabBarAppState();
}

class _TabBarAppState extends State<TabBarApp>
    with SingleTickerProviderStateMixin {
  TabController _controller;
  List<TabData> _tabData;
  List<Tab> _tabs = [];
  List<Widget> _tabViews = [];
  Color _activeColor;

  @override
  void initState() {
    super.initState();
    _tabData = [
      TabData(title: 'First Tab', color: Colors.red),
      TabData(title: 'Second Tab', color: Colors.green),
      TabData(title: 'Third Tab', color: Colors.blue),
    ];
    _activeColor = _tabData.first.color;
    _tabData.forEach((data) {
      final tab = Tab(
        child: Container(
          constraints: BoxConstraints.expand(),
          color: data.color,
          child: Center(
            child: Text(data.title),
          ),
        ),
      );
      _tabs.add(tab);

      final widget = Scaffold(backgroundColor: data.color);
      _tabViews.add(widget);
    });
    _controller = TabController(vsync: this, length: _tabData.length)
      ..addListener(() {
        setState(() {
          _activeColor = _tabData[_controller.index].color;
        });
      });
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(primaryColor: _activeColor),
      child: Scaffold(
        backgroundColor: _activeColor,
        appBar: AppBar(
          title: Text('Multi Colored Tab Bar'),
          bottom: TabBar(
            indicatorColor: _activeColor,
            labelPadding: EdgeInsets.zero,
            controller: _controller,
            tabs: _tabs,
          ),
        ),
        body: TabBarView(
          controller: _controller,
          children: _tabViews,
        ),
      ),
    );
  }
}

class TabData {
  TabData({this.title, this.color});

  final String title;
  final Color color;
}

1. Это работает, но на невыбранных вкладках есть небольшой пробел там, где находится индикатор. это не рассматривается. imgur.com/a/6v8y28O

2. constraints: BoxConstraints.expand(), это было волшебство.

Ответ №3:

Я заставил ее работать, изменив primaryColor в theme of MaterialApp , цвет вкладки можно изменить. Итак, внутри метода сборки MyTabsState возвращает MaterialApp и устанавливает для него theme значение переменной currentTabColor.

Объявите currentTabColor в MyTabsState и установите его в Colors.red

Затем установите onTap для обратного вызова, который возвращает индекс текущей вкладки и изменяет состояние currentTabColor с помощью if..else

 import 'package:flutter/material.dart';

void main() {
  runApp(MyTabs());
}

class MyTabs extends StatefulWidget {
  @override
  MyTabsState createState() => MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  TabController controller;
  Color currentTabColor;

  @override
  void initState() {
    super.initState();
    currentTabColor = Colors.red;
    controller = TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: currentTabColor,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multi Colored Tab Bar'),
          bottom: TabBar(
            onTap: (tabIndex) {
              if (tabIndex == 0)
                currentTabColor = Colors.red;
              else if (tabIndex == 1)
                currentTabColor = Colors.blue;
              else
                currentTabColor = Colors.green;
              setState(() {
                currentTabColor = currentTabColor;
              });
            },
            controller: controller,
            tabs: <Tab>[
              Tab(
                text: 'First Tab',
              ),
              Tab(text: 'Second Tab'),
              Tab(text: 'Third Tab'),
            ],
          ),
        ),
        body: TabBarView(
          controller: controller,
          children: <Widget>[
            Scaffold(backgroundColor: Colors.red),
            Scaffold(backgroundColor: Colors.blue),
            Scaffold(backgroundColor: Colors.green),
          ],
        ),
      ),
    );
  }
}

Вывод

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

2. Звучит замысловато, но это будет выглядеть не так хорошо. В приложении Google Play при нажатии на любую вкладку цвет вкладки и панели приложений меняется только после этого. Изначально все вкладки имеют зеленый цвет.

3. спасибо, что изучили это, я многому научился, и это хорошее начало того, что я себе представлял