点击时如何更改 ListTile 背景颜色？答案

【问题标题】：How to change ListTile background color when tapped?点击时如何更改 ListTile 背景颜色？
【发布时间】：2019-05-09 00:33:58
【问题描述】：

我搜索了高低，但找不到更改 ListTile 背景颜色的方法，例如当用户点击它时。

对于看似常见的用例，有人有解决方案吗？

【问题讨论】：

stackoverflow.com/a/58092611/10511266 可能会有所帮助。

标签： flutter flutter-layout

【解决方案1】：

要更改ListTile 的背景颜色，您只需将其包装在Container 中并更改其color 属性即可。之后，当ListTile 的onTap 被触发时，您可以更改颜色。

演示：

演示来源：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomTile()
        ),
      ),
    );
  }
}

class CustomTile extends StatefulWidget {
  @override
  CustomTileState createState() => CustomTileState();
}

class CustomTileState extends State<CustomTile> {
  Color color;

  @override
  void initState() {
    super.initState();

    color = Colors.transparent;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: ListTile(
        title: Text('Title'),
        subtitle: Text('Subtitle'),
        onTap: () {
          setState(() {
            color = Colors.lightBlueAccent;
          });
        },
      ),
    );
  }
}

【讨论】：

我明白了...... ListTile 必须包装在另一个小部件中，如容器（或卡片）。我想知道为什么 Flutter 开发人员不只是将此功能直接集成到 ListTile 中，并允许在没有包装的情况下更改它的 bg 颜色……这似乎是一个常见的用例。感谢@anmol.majhail 和 Niklas。我没有发布任何代码，因为在这种情况下它不会有帮助。我的代码一团糟。
@pskink 是的，我查看了 InkWell。我喜欢它提供 onTap、onDoubleTap 和 onLongPress 处理程序。除此之外，使用一种方法优于另一种方法还有什么优势，例如将 ListTiles 包装在 InkWell 而不是 Container 中？
@LordNull 请参阅ListTile#build
我不太确定这说明了什么。你能简单解释一下吗？
@LordNull 它只是说InkWell 被每个ListTile 项目内部使用

【解决方案2】：

由于您没有描述您的用例或共享任何代码，因此我共享了更改 Listile 颜色 onTap() 的示例代码

class Screen1 extends StatefulWidget {
  @override
  Screen1State createState() {
    return new Screen1State();
  }
}

class Screen1State extends State<Screen1> {
  bool _color;

  @override
  void initState() {
    super.initState();
    _color = true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Card(
        color: _color ? Colors.deepOrangeAccent : Colors.purpleAccent,
        child: ListTile(
          onTap: () {
            setState(() {
              _color = !_color;
            });
          },
          title: Text(
            'Title',
            style: TextStyle(color: Colors.white),
          ),
          subtitle: Text(
            'Subtitle',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ));
  }
}

【讨论】：

【解决方案3】：

如果您只是想要一种快速的方法，无需太多代码和自定义，您可以使用RaisedButton 包装它，如下所示：

RaisedButton(
  color: ...
  child: ListTile(
    color: Colors.transparent,
    ...
  )

)

您还可以使用许多属性，例如高度、突出显示颜色、焦点颜色等等。

【讨论】：