Flutter：Cupertino ListTile？ （或如何创建类似 iOS 的设置菜单）

Question

我们是否有一种仅使用CupertinoApp来执行下面那种菜单的简单方法？

Answer 1

好的，所以我们可以像这样在CupertinoPageScaffold使用Scaffold ，并且仍然使用与 Cupertino 相同的材质ListTile 。

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('My List'),
      ),
      child: SafeArea(
        child: Scaffold(
          body: _listView(context),
        ),
      ),
    );
  }

Answer 2

你可以在 pub.dev 上试试这个：

cupertino_list_tile: ^0.2.0

https://pub.dev/packages/cupertino_list_tile

Answer 3

通过使用 CupertinoButton 而不是 ListTile，我能够获得非常接近 iOS 列表的结果，这是一个非常灵活的组件。 它显然也没有连锁反应。

结果

这种方法的唯一缺点是按钮使用了pressedOpacity，但是将默认值从0.4减少到0.65或类似的东西就可以了。

CupertinoButton(
  pressedOpacity: 0.65,
  color: Colors.white,
  borderRadius: const BorderRadius.all(
    Radius.circular(0),
  ),
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
  alignment: Alignment.centerLeft,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          const Padding(
            padding: EdgeInsets.only(right: 12),
            child: SizedBox(
              height: 28,
              width: 28,
              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.teal,
                  borderRadius: BorderRadius.all(
                    Radius.circular(4),
                  ),
                ),
                child: Icon(
                  Icons.ac_unit_sharp,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          Text(
            'Snowflake item',
            style: TextStyle(color: Colors.black),
          ),
        ],
      ),
      const Icon(
        Icons.chevron_right,
        color: Colors.grey,
      ),
    ],
  ),
  onPressed: () {},
)

Answer 4

Flutter 3.7添加了两个新小部件： CupertinoListSection和CupertinoListTile ，用于显示 iOS 样式的可滚动小部件列表。

公众号：https://github.com/flutter/flutter/pull/78732