如何在 ListTile 中对齐文本?

时间:2021-04-26 07:01:39

标签: flutter listview text alignment flutter-layout

有没有其他方法可以让我在不使用 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' is not aligned with 'leading' and 'trailing'

3 个答案:

答案 0 :(得分:1)

抱歉,如果我没有解决所问的问题,但作为建议,如何将其包装在 Row Widget 而不是 List Tile 中,您将其居中对齐?

答案 1 :(得分:0)

首先,我相信您的开头与标题和结尾不符,我不知道是什么原因导致您的代码发生这种情况。解决方案可能是使用 + 运算符将您的两个文本放在标题中。或以任何有助于您解决问题的方式领导。

答案 2 :(得分:0)

It is working for you

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