使用 Flutter/Dart 對齊卡片中的項目

Question

我正在嘗試更好地對齊 Card/ListTile 中的文本、圖標和箭頭。 我似乎無法讓它們垂直對齊。 我嘗試了一些在 SO 上找到的解決方案，但沒有一個奏效。 我究竟做錯了什么？

飛鏢代碼：

class _ClassSettingsState extends State<ClassSettings> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                SizedBox(
                  height: 50.0,
                  child: Card(
                    child: ListTile(
                      leading: Icon(Icons.settings, size: 20.0),
                      title: Text('Settings'),
                      trailing: Icon(Icons.keyboard_arrow_right),
                      onTap: () {
                        print('Settings was tapped');
                        //Navigator.pushNamed(context, TestConfirmation.id);
                      },
                    ),
                  ),
                ),
                SizedBox(
                  height: 50.0,
                  child: Card(
                    child: ListTile(
                      leading: Icon(Icons.message, size: 20.0),
                      title: Text('Messages'),
                      trailing: Icon(Icons.keyboard_arrow_right),
                      onTap: () {
                        print('Message was tapped');
                        //Navigator.pushNamed(context, TestConfirmation.id);
                      },
                    ),
                  ),
                ),

Answer 1

看起來正在發生的事情是您的大小框正在切斷 ListTile 的底部。 如果height: 50.0 ，則一切都居中。

ListTile有一個符合 Material Design 規范的最小高度，所以如果可以的話，我建議ListTile你的height: 50.0 。

如果您需要該特定尺寸，您可以執行以下操作：

class MenuOptions extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListItem(
          title: "Settings",
          icon: Icons.settings,
          onTap: () {
            print("Settings Tapped");
          },
        ),
        ListItem(
          title: "Messages",
          icon: Icons.message,
          onTap: () {
            print("Messages Tapped");
          },
        ),
      ],
    );
  }
}

class ListItem extends StatelessWidget {
  final Function onTap;
  final IconData icon;
  final String title;
  const ListItem(
      {@required this.onTap, @required this.icon, @required this.title});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50.0,
      child: Card(
        child: InkWell(
          onTap: onTap,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(flex: 1, child: Icon(icon, size: 20.0)),
              Expanded(flex: 4, child: Text(title)),
              Expanded(flex: 1, child: Icon(Icons.keyboard_arrow_right)),
            ],
          ),
        ),
      ),
    );
  }
}