Question

我正在使用ListTile创建一个Listview。我试图显示事件的日期，时间，标题和描述。但是，我的ListTile存在一个问题：the position of my data are not the same between cards 这确实会影响用户使用该应用的体验。

有人可以帮我吗？谢谢：）

class MemberEvents extends StatelessWidget {

Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
return Center(
  child: Card(
    child: Column(
      children: <Widget>[
        ListTile(
          leading: new Column(
            children: <Widget>[
              Text(document['date']),
              Text(document['time'])
            ],
          ),
          title: Text(document['title']),
          subtitle: Text(document['description'], maxLines: 3),
        )
      ],
    ),
  ),
);
}

@override
Widget build(BuildContext context) {
return new Scaffold(
  body: StreamBuilder(
      stream: Firestore.instance.collection('events').snapshots(),
      builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) return const Text('Loading...');
        final int eventCount = snapshot.data.documents.length;
        return ListView.builder(
          itemCount: eventCount,
          itemBuilder: (context, index) =>
              _buildListItem(context, snapshot.data.documents[index]),
        );
      }),
);
 }
 }

Answer 1

我有机会构建您的代码，而解决此问题的方法是，在包装日期和时间的mainAxisAlignment小部件内将MainAxisAlignment.center属性设置为Column。

例如

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text("07/07/2019"),
    Text("9:38 AM")
  ],
)

您的完整代码应如下所示：

class MemberEvents extends StatelessWidget {

  Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
    return Center(
      child: Card(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(document['date']),
                  Text(document['time'])
                ],
              ),
              title: Text(document['title']),
              subtitle: Text(document['description'], maxLines: 3),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: StreamBuilder(
        stream: Firestore.instance.collection('events').snapshots(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (!snapshot.hasData) return const Text('Loading...');
          final int eventCount = snapshot.data.documents.length;
          return ListView.builder(
            itemCount: eventCount,
            itemBuilder: (context, index) =>
              _buildListItem(context, snapshot.data.documents[index]),
          );
        }
      ),
    );
  }
}

颤振如何使行距与ListTile中的标题和字幕对齐

1 个答案: