如何在 Flutter 中选择时更改 ListTile 的背景颜色

Posted 2023-02-23

【中文标题】如何在 Flutter 中选择时更改 ListTile 的背景颜色

【英文标题】：How to Change background color of ListTile upon selection in Flutter

【发布时间】：2021-05-26 16:30:54

【问题描述】：

import 'package:JAPANESE/data/hiraganaall.dart';
import 'package:flutter/material.dart';

class HiraganaPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Hiragana",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueAccent,
      ),
      body: ListView.separated(
        separatorBuilder: (context, index) 
          return Divider(
            thickness: 3.0,
            height: 1.0,
          );
        ,
        itemCount: data.length,
        itemBuilder: (context, index) 
          return Container(
            decoration: BoxDecoration(color: Colors.grey[300]),
            child: ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.white,
                radius: 28,
                child: Image.network(
                  data[index]["writing"],
                ),
              ),
              title: Text(
                "Text: " + data[index]["key"],
                style: TextStyle(
                  fontFamily: "Merienda",
                  fontSize: 18.22,
                ),
              ),
              subtitle: Text(
                "Reading: " + data[index]["reading"],
                style: TextStyle(
                  fontFamily: "Merienda",
                  fontSize: 18.22,
                ),
              ),
            ),
          );
         ,
      ),
    );
  

我在 Flutter 中做了一个 ListView，但是现在这个 ListView 中有一些 ListTiles 可以选择。选择后，我希望背景颜色更改为我选择的颜色。我不知道该怎么做。在文档中，他们提到 ListTile 具有属性样式。但是，当我尝试添加它时（如下面代码中的倒数第三行），此样式属性在下方出现一条波浪状的红线，编译器告诉我未定义命名参数“样式”。

【问题讨论】：

这能回答你的问题吗？ Change background color of ListTile upon selection in Flutter

【参考方案1】：

你可以用一个容器包裹 ListTile 并改变它的颜色。这是该代码的示例以及更改颜色的方法：

class Issue66349460 extends StatefulWidget 
  @override
  _Issue66349460State createState() => _Issue66349460State();


class _Issue66349460State extends State<Issue66349460> 
  List<Item> items = [
    Item(title: 'Item 1', color: Colors.red),
    Item(title: 'Item 2', color: Colors.blue),
    Item(title: 'Item 3', color: Colors.green),
  ];

  @override
  Widget build(BuildContext context) 
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) 
        return Container(
          color: items[index].color,
          child: ListTile(
            title: Text(items[index].title),
            onTap: () => changeListTileColor(items[index]),
          ),
        );
      
    );
  

  void changeListTileColor(Item item)
    setState(() 
      item.color = Colors.deepPurple;
    );
  


class Item 
  String title;
  Color color;

  Item(@required this.title, this.color);