我们可以更改仅在 flutter 中按下的标题的颜色吗

Question

我有一个标题列表，它是文本形式的。我可以更改按下的标题颜色，但所有标题的颜色 changes.Can 我只更改按下的标题？我以这种方式存储了初始颜色

Color color = Colors.yellow;
     child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: state.posts.length,
                itemExtent: 300.0,
                itemBuilder: (context, index) {
                  final item = state.posts[index];
                  return Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 10.0, vertical: 6.0),
                    child: GestureDetector(
                      onTap: () {
                         setState(() {
                    color = Colors.black;
                  });
                      },
                      child: Container(
                        color: Colors.red,
                        child: Text(
                          item.title,
                          style: TextStyle(color: color),
                        ),
                      ),
                    ),
                  );
                },
              ),

Answer 1

您可以创建一个与标题长度相同的颜色列表，当您按下时，您可以使用 titles 的相同 index 来更改颜色。

/// declare outside build function
List<Color> titleColors = [];


if(colors.isEmpty) {
 for(String title in titles) {
   colors.add(Colors.yellow);
 }
}
     child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: state.posts.length,
                itemExtent: 300.0,
                itemBuilder: (context, index) {
                  final item = state.posts[index];
                  return Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 10.0, vertical: 6.0),
                    child: GestureDetector(
                      onTap: () {
                         setState(() {
                    titleColors[index] = Colors.black;
                  });
                      },
                      child: Container(
                        color: Colors.red,
                        child: Text(
                          item.title,
                          style: TextStyle(color: titleColors[index]),
                        ),
                      ),
                    ),
                  );
                },
              ),

Answer 2

我可以看到几个解决方案 this.you 可以为此创建一个单独的有状态小部件，或者您可以使用状态管理方法（如提供程序）。

问题在这里

setState(() {
                color = Colors.black;
              });

当我们单击一个按钮时，整个列表视图将使用我们 given.For 的颜色重建，我们需要保持主窗口小部件状态稳定并更改列表视图子状态。

尝试this.first创建一个列表项有状态小部件。

    import 'package:flutter/material.dart';

class ListItem extends StatefulWidget {
  const ListItem({Key key,}) : super(key: key);

  @override
  _ListItemState createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  Color color = Colors.yellow;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: GestureDetector(
        onTap: () {
          setState(() {
            color = Colors.black;
          });
        },
        child: Container(
          color: Colors.red,
          child: Text(
            item.title,
            style: TextStyle(color: color),
          ),
        ),
      ),
    );
  }
}

然后将其添加到您的列表视图中。

ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: state.posts.length,
            itemExtent: 300.0,
            itemBuilder: (context, index) {
              final item = state.posts[index];
              return ListItem();
            },
          );

这将 work.You 想要将项目值传递给那个 widget.You 必须创建一个构造函数变量并将其传递给那个 ListItem 小部件。

我们可以更改仅在 flutter 中按下的标题的颜色吗

Can we change the color of the title which is pressed only in flutter

flutter

flutter-dependencies

flutter-layout