【问题标题】:Flutter ListTile - Vertical align all items to centerFlutter ListTile - 将所有项目垂直对齐到中心
【发布时间】:2021-12-21 17:25:49
【问题描述】:

我想将 ListTile 中的所有内容(标题、副标题、前导、尾随等)垂直居中对齐。最好的方法是什么?

const Padding(
    padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
    child: Card(
      child: ListTile(
        leading: FlutterLogo(size: 55),
        title: Text('Overview'),
        subtitle: Text(
          '250.956.261',
        ),
        trailing: Icon(
          Icons.arrow_right_outlined,
          size: 30,
        ),
        isThreeLine: true,
      ),
    ),
),

【问题讨论】:

    标签: flutter dart widget listtile


    【解决方案1】:

    您可以使用下面的替代代码来获得您想要的东西

             Padding(
              padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          const FlutterLogo(size: 55),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text('Overview'),
                              Text(
                                '250.956.261',
                              ),
                            ],
                          ),
                        ],
                      ),
                   const Icon(
                        Icons.arrow_right_outlined,
                        size: 30,
                      ),
                    ],
                  ),
                ),
              ),
            );
    

    【讨论】:

    • 感谢您的宝贵时间!虽然只是删除了“isThreeLine:true”,但正如@KGEM 提到的那样
    【解决方案2】:

    我最初误解你的问题是关于水平居中ListTile 的内容。要在卡片内垂直居中项目,您可能只需要禁用isThreeLine 参数。禁用它会导致内容垂直居中。

    构建方法代码:

      @override
      Widget build(BuildContext context) {
        return const Center(
          child: Card(
            child: ListTile(
              leading: FlutterLogo(size: 55),
              title: Text('Overview'),
              subtitle: Text(
                '250.956.261',
              ),
              trailing: Icon(
                Icons.arrow_right_outlined,
                size: 30,
              ),
              // isThreeLine: true,
            ),
          ),
        );
      }
    

    【讨论】:

    • 哇!这么简单的解决方案。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-02-25
    • 2019-11-20
    • 2023-03-13
    • 2020-11-18
    • 1970-01-01
    • 2015-12-22
    • 2018-03-16
    相关资源
    最近更新 更多