如何在 Flutter 中为选定的 ListTile 添加样式？

Question

我有多个列表图块，我想向选定的列表图块添加一些样式。为了设置所选图块的颜色，我使用了ListTileTheme因此无论选择哪个图块都将获得 中定义的颜色ListTileTheme。

ListTileTheme(
  selectedTileColor: Colors.white,
  child: ...
),

我还想在 的左上角和左下角设置边框半径ListTile，为此我正在使用ClipRRect

ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(32),
    bottomLeft: Radius.circular(32),
  ),
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text('Teams'),
    onTap: () {},
    selected: true,
  ),
),

如下图所示，效果很好：

但我必须手动将其添加到特定的列表图块中。与定义一次的所选图块颜色不同，它会自动应用到所选属性为 true 的任何图块上，如何ClipRRect以类似的方式进行设置，以便选择的图块在左上角和左下角接收边框半径？

Answer 1

你可能犯了和我一样的错误，没有研究ListTile的所有属性。ListTile 有几个有用的属性，例如shape或 ，selectedTileColor可以解决您的问题。

import 'package:flutter/material.dart';

class SideMenuItem extends StatelessWidget {
  final String title;
  final IconData icon;
  final GestureTapCallback onTap;
  final bool active;

  const SideMenuItem({required this.title, required this.icon, required this.onTap, required this.active, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    var borderRadius = const BorderRadius.only(topRight: Radius.circular(32), bottomRight: Radius.circular(32));
    return ListTile(
      shape: RoundedRectangleBorder(borderRadius: borderRadius),
      selectedTileColor: Colors.orange[100],
      selected: active,
      onTap: () {},
      leading: Icon(icon),
      title: Text(title),
    );
  }
}

Answer 2

为了向选定的列表图块添加样式，我使用了ListView.builder，添加了要在地图的列表图块中显示的所有菜单项。

final List<Map<String, dynamic>> _menuItem = [
    {
      "title": "Home",
      "icon": Icon(Icons.home),
      "selected": false,
    },
    {
      "title": "Teams",
      "icon": Icon(Icons.people),
      "selected": true,
    },
    {
      "title": "Ideas",
      "icon": Icon(Icons.lightbulb),
      "selected": false,
    }
];

然后使用ListView.builder循环遍历它们。

ListView.builder(
  itemCount: _menuItem.length,
  itemBuilder: (context, index) {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(32),
        bottomLeft: Radius.circular(32),
      ),
      child: ListTile(
        leading: _menuItem[index]['icon'],
        title: Text(_menuItem[index]['title']),
        selected: _menuItem[index]['selected'],
        onTap: () {
          if (!_menuItem[index]['selected'])
            changeSelectedMenu(index);
          },
      ),
    );
 },
)

changeSelectedMenu函数确保单击的菜单项的selected属性设置为 true。正如所讨论的那样，选定的图块颜色设置为 true，并且无论哪个图块为白色，都会从 获取圆角半径ClipRRect。