如何为选定的ListItem onTap着色

2 回答

• 0

  你应该在列表中的每个项目上都有一个isSelected值，然后当用户点击列表中的一个项目时，你将改变isSelected值只是为了录音项目索引而在构建语句中你应该这样做action基于传入索引的isSelected值

  这是一个例子：

  

  class MyListWidgetState extends State<MyListWidget> {
    List<String> items = ["A", "B", "C", "D", "E", "F"];
  
    Map<int, bool> itemsSelectedValue = Map();
  
    @override
    Widget build(BuildContext context) {
      return new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            bool isCurrentIndexSelected = itemsSelectedValue[index] == null
                ? false
                : itemsSelectedValue[index];
  
            Container contianer;
  
            if (isCurrentIndexSelected) {
              contianer = new Container(
                alignment: Alignment.center,
                height: 100.0,
                color: Colors.blue,
                child: new Text(
                  items[index],
                  style: new TextStyle(color: Colors.red, fontSize: 18.0),
                  textAlign: TextAlign.center,
                ),
              );
            } else {
              contianer = new Container(
                alignment: Alignment.center,
                height: 100.0,
                color: Colors.red,
                child: new Text(
                  items[index],
                  style: new TextStyle(color: Colors.blue, fontSize: 18.0),
                  textAlign: TextAlign.center,
                ),
              );
            }
  
            return GestureDetector(
              onTap: () {
                print("${!isCurrentIndexSelected}");
                itemsSelectedValue[index] = !isCurrentIndexSelected;
  
                setState(() {
                  print("OnClick : $index + ${itemsSelectedValue[index]}");
                });
              },
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: contianer,
              ),
            );
          });
    }
  }
  

  或者您可以创建StateFull小部件，它为列表中的每个项目保留自己的isSelected值，如下例所示：

  List<String> items = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "D",
    "J",
    "K",
    "L",
    "M",
    "P"
  ];
  
  class SampleApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Sample App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
            body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return new SelectableWidget(
              new SelectableWidgetViewModel(
                items[index],
                isSelected: false,
              ),
            );
          },
        )),
      );
    }
  }
  
  class SelectableWidget extends StatefulWidget {
    final SelectableWidgetViewModel viewModel;
  
    SelectableWidget(this.viewModel);
  
    @override
    State<StatefulWidget> createState() {
      return SelectableWidgetState();
    }
  }
  
  class SelectableWidgetState extends State<SelectableWidget> {
    @override
    void initState() {
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      Container container;
  
      if (widget.viewModel.isSelected) {
        container = new Container(
          alignment: Alignment.center,
          height: 100.0,
          color: Colors.blue,
          child: new Text(
            widget.viewModel.title,
            style: new TextStyle(color: Colors.red, fontSize: 18.0),
            textAlign: TextAlign.center,
          ),
        );
      } else {
        container = new Container(
          alignment: Alignment.center,
          height: 100.0,
          color: Colors.red,
          child: new Text(
            widget.viewModel.title,
            style: new TextStyle(color: Colors.blue, fontSize: 18.0),
            textAlign: TextAlign.center,
          ),
        );
      }
  
      return GestureDetector(
        onTap: () {
          setState(() {
            widget.viewModel.isSelected = !widget.viewModel.isSelected;
          });
        },
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: container,
        ),
      );
    }
  }
  
  class SelectableWidgetViewModel {
    bool isSelected;
    String title;
  
    SelectableWidgetViewModel(this.title, {this.isSelected = false});
  }
  

  我认为第二种选择因性能原因更好

  回复于 2024-04-28T19:23:13+08:00
• 1

  你需要做的是重构你的代码，使得传递给 ListView builder 函数的小部件拥有它自己的 StatefulWidget . 因此，将构建器函数内的窗口小部件树移动到它自己的单独的 StatefulWidget 中，并在那里处理状态操作逻辑而不是 ProcedureList . 您获得此行为的原因是因为通过将逻辑移动到单独的 StatefulWidget 中，从 ListView.builder 生成的每个实例都暴露于相同的状态值 isSelected ，每个实例都将拥有自己的状态 .

  回复于 2024-04-28T19:23:13+08:00