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