Flutter ListTile 前导图和标题对齐答案

【问题标题】：Flutter ListTile leading image and title alignmentFlutter ListTile 前导图和标题对齐
【发布时间】：2019-11-04 20:10:19
【问题描述】：

在标准的 ListTile 中，是否可以将前导图像和标题对齐到顶部，水平？

 child: ListTile(
    leading: FlutterLogo(size: 72.0),
    title: Text('Three-line ListTile'),
    subtitle: Text(
      'A sufficiently long subtitle warrants three lines.'
    ),
    trailing: Icon(Icons.more_vert),
    isThreeLine: true,
  ),

https://api.flutter.dev/flutter/material/ListTile-class.html

【问题讨论】：

你所说的“在顶部，平整”是什么意思？
@FilipP。有点像在顶部闪过
字幕上方？喜欢在列中？
@FilipP。这就像让主图像和标题在顶部对齐。
将它包装在一个容器中，给它一个宽度和高度并设置对齐属性。

标签： listview flutter alignment

【解决方案1】：

我认为您应该考虑使用Row 中的documentation 中所述的ListTile 小部件，例如，您应该使用Row 来实现复杂的UI。在你的情况下，你需要一个 Row 属性 crossAxisAlignment: CrossAxisAlignment.start

Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      CircleAvatar(
        radius: 20,
        backgroundImage: AssetImage('assets/avatar1.jpg'),
      ),
      Expanded(
        child: Container(
          padding: EdgeInsets.only(left: 5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              RichText(
                text: TextSpan(
                  style: DefaultTextStyle.of(context).style,
                  children: [
                    TextSpan(
                      text: 'hello :  ',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    TextSpan(
                      text:
                          'the comment comment the comment comment the comment comment comment comment the comment comment the comment comment',
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),

【讨论】：