如何对齐 ListTile 中的文本？

Posted 2023-02-23

【中文标题】如何对齐 ListTile 中的文本？

【英文标题】：How to align the text within ListTile?

【发布时间】：2021-07-19 13:29:18

【问题描述】：

我有没有其他方法可以在不使用 Row 小部件的情况下对齐 ListTile 的前导和标题内的文本？数据是从 Firebase 获取的，然后使用 Listview 查看。生成器。

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) 
    if (snapshot.hasData) 
      List<taskData> result = snapshot.data as List<taskData>;

      return ListView.builder(
          scrollDirection: Axis.vertical,
          itemCount: result.length,
          itemBuilder: (BuildContext context, int i) 
            DateTime updateDate = DateTime.fromMillisecondsSinceEpoch(result[i].date);
            String formDate = DateFormat('yMMMd').format(updateDate);

            return GestureDetector(
              onTap: () 
                NavigationController(context, 'Edit', 'Title',
                    result[i].task, result[i].id, updateDate);
              ,
              child: Card(
                child: ListTile(
                  leading: Text(formDate, style: TextStyle(fontFamily: 'ProximaNova', fontSize: 16),),
                  title: Text('$result[i].task',style: TextStyle(fontFamily: 'ProximaNova',fontSize: 18),),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () 
                      id = result[i].id;
                      showDialog<void>(
                          context: context, builder: (context) => dialog);
                    ,
                  ),
                ),
              ),
            );
          );
     else if (snapshot.hasError) 
      print('$snapshot.error');
      return Text(
        "",
        style: TextStyle(fontSize: 20),
      );
    

    // By default, show a loading spinner.
    return Center(
        child: Container(
      margin: EdgeInsets.symmetric(vertical: 100.0),
      child: CircularProgressIndicator(),
    ));
  ,
),

这是供参考的图片（'title'与'leading'和'trailing'不对齐）：

【参考方案1】：

很抱歉，如果我没有解决所提出的问题，但作为建议如何将其包装在行小部件而不是列表平铺中，您可以将其居中对齐？

【讨论】：

我可以想象解决方案。也许这是唯一的方法

【参考方案2】：

It is working for you

ListTile(
       leading: Text('2021-04-27'),
       title: Text('Lion', textAlign: TextAlign.center,),
       trailing: IconButton(
                icon: Icon(Icons.delete),
                onPressed: () ,                  
      ),
    ),

【讨论】：

它有点工作但并不完全一致。我所做的只是更改字体大小并添加 TextAlign.center。我认为最好使用 Row + SizedBox 来实现正确的对齐，但我现在没有太多时间来试验它

【参考方案3】：

首先，我相信您的前导与标题和尾随不一致，我不知道您的代码发生这种情况的原因是什么。解决方案可能是使用 + 运算符将您的两个文本都放在标题中。或带头帮助您解决问题。

【讨论】：

我会尝试将它们聚集在标题中