不同颜色的标签

Question

如果我创建了一个选项卡列表，它的美观是由我指定颜色的容器提供的，我可以用if-else来动态地显示这个容器的颜色吗?这样每个选项卡根据用户选择的颜色有不同的颜色，还是会在所有选项卡以相同的颜色出现？

下面是选项卡的一个示例：

Container buildTaskCard(Task personModel, [Color color = Colors.white]) {
    return Container(
      margin: const EdgeInsets.fromLTRB(20, 5, 20, 5),
      padding: const EdgeInsets.fromLTRB(18, 10, 10, 10),
      decoration: BoxDecoration(
          color: color, //Colore dinamico
          borderRadius: BorderRadius.circular(10),
      ....
    );

Answer 1

如下面的示例所示，您可以在一个列表中收集颜色，然后按索引进行索引：

class TabPage extends StatefulWidget {
  const TabPage({Key? key}) : super(key: key);

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> with TickerProviderStateMixin {
  _TabPageState({Key? key}) : super(key: key);
late TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: personModels.length, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TabBar(
      controller: _tabController,
        tabs: List<Widget>.generate(personModels.length,
            (index) => buildTaskCard(personModels[index], colors[index])),
      ),
    );
  }

  final List<Color> colors = [...]; // your colors
  final List<Task> personModels = [...]; // your personmodels

  Container buildTaskCard(Task personModel, [Color color = Colors.white]) {
    return Container(
      margin: const EdgeInsets.fromLTRB(20, 5, 20, 5),
      padding: const EdgeInsets.fromLTRB(18, 10, 10, 10),
      decoration: BoxDecoration(
          color: color, //Colore dinamico
          borderRadius: BorderRadius.circular(10),
      ....
    );
  }
}