基于索引的图标和颜色

罗伯特

我的 Flutter 项目需要一些帮助,因为我现在似乎被卡住了……

目前我正在开发一个日历应用程序,我想创建一些事件“类别”。根据索引,我希望显示某个图标。目前只有两个图标。一个填充和未填充的圆圈。请参阅以下屏幕截图的链接。

当前图标

根据以下代码中的方法选择图标。

颜色选择器.dart:

class _ColorPicker extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ColorPickerState();
  }
}

class _ColorPickerState extends State<_ColorPicker> {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Container(
          width: double.maxFinite,
          child: ListView.builder(
            padding: const EdgeInsets.all(0),
            itemCount: _colorCollection.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                contentPadding: const EdgeInsets.all(0),
                leading: Icon(
                    index == _selectedColorIndex
                        ? Icons.lens
                        : Icons.trip_origin,
                    color: _colorCollection[index]),
                title: Text(_colorNames[index]),
                onTap: () {
                  setState(() {
                    _selectedColorIndex = index;
                  });

                  // ignore: always_specify_types
                  Future.delayed(const Duration(milliseconds: 200), () {
                    // When task is over, close the dialog
                    Navigator.pop(context);
                  });
                },
              );
            },
          )),
    );
  }
}

我希望图标根据类别显示,就像我在下面的代码中尝试设置的那样。

日历.dart

class Category {
  String eventCategory;
  IconData eventIcon;

  Category(this.eventCategory, this.eventIcon);
}

List<Category> _categories = [
  Category('Productivity', Icons.add_to_queue),
  Category('Self Development', Icons.bolt_rounded),
  Category('Task', Icons.check),
];

如果有人能帮我弄清楚如何替换我只能选择 2 个图标的代码部分,那将不胜感激!

提前感谢您的关注!

亲切的问候,

罗伯特

鲁斯兰贝克0809

我没看好你 我猜您想显示每个类别的图标,当通过onTap方法选择一个时,您想在选择时更改图标的颜色。我就是这样做的。如果您希望我更改某些内容,请通知我。

这是我的代码片段。复制粘贴看看效果:

import 'package:flutter/material.dart';

class ColorPickerScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ColorPickerScreenState();
  }
}

class Category {
  String eventCategory;
  IconData eventIcon;

  Category(this.eventCategory, this.eventIcon);
}

class _ColorPickerScreenState extends State<ColorPickerScreen> {
  List<Category> _categories = [
    Category('Productivity', Icons.add_to_queue),
    Category('Self Development', Icons.bolt_rounded),
    Category('Task', Icons.check),
  ];

  int? _selectedColorIndex; // change here to `int _selectedColorIndex` if your flutter sdk version is older than null safety version
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Container(
          width: double.maxFinite,
          child: ListView.builder(
            padding: const EdgeInsets.all(0),
            itemCount: _categories.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                contentPadding: const EdgeInsets.all(0),
                leading: Icon(_categories[index].eventIcon,
                    color: index == _selectedColorIndex
                        ? Colors.green
                        : Colors.red),
                title: Text(_categories[index].eventCategory),
                onTap: () {
                  setState(() {
                    _selectedColorIndex = index;
                  });

                  /// This part is not needed
                  // // ignore: always_specify_types
                  // Future.delayed(const Duration(milliseconds: 200), () {
                  //   // When task is over, close the dialog
                  //   Navigator.pop(context);
                  // });
                },
              );
            },
          )),
    );
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章