Question

我有这个颤动代码：

body: StreamBuilder(
          stream: Firestore.instance.collection('Doctors').snapshots(),
          builder:
              (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (!snapshot.hasData)
              return const Center(child: CircularProgressIndicator());
            return ListView(
              padding: const EdgeInsets.only(top: 8.0),
              children:
              snapshot.data.documents.map((DocumentSnapshot document) {
                return new Card(
                  child: new Container(
                    padding: EdgeInsets.all(10.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: Colors.grey,
                          backgroundImage:
                          new NetworkImage("${document['Picture']}"),
                          radius: 40.0,
                        ),
                        SizedBox(width: 10.0,
                        ),
                        Text(
                          document['Name'],
                        )
                      ],
                    ),
                  ),
                );
              }).toList(),
            );
          },
        ),
      ),

并且我需要在连接到Text（document ['Name']，）的文本下插入另一个文本作为字幕，但是我不能这样做，请你帮我

Answer 1

这就是您想要的，只需添加ListTile

body: StreamBuilder(
          stream: Firestore.instance.collection('Doctors').snapshots(),
          builder:
              (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (!snapshot.hasData)
              return const Center(child: CircularProgressIndicator());
            return ListView(
              padding: const EdgeInsets.only(top: 8.0),
              children:
              snapshot.data.documents.map((DocumentSnapshot document) {
                return new Card(
                  child: new Container(
                    padding: EdgeInsets.all(10.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: Colors.grey,
                          backgroundImage:
                          new NetworkImage("${document['Picture']}"),
                          radius: 40.0,
                        ),
                        SizedBox(width: 10.0,
                        ),
                        new ListTile(
                         title: Text(document['name']),
                         subtitle: Text('subtitle'),
                      ],
                    ),
                  ),
                );
              }).toList(),
            );
          },
        ),
      ),

Answer 2

return new Card(
      child: new Container(
        padding: EdgeInsets.all(10.0),
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            CircleAvatar(
              backgroundColor: Colors.grey,
              backgroundImage: new NetworkImage("${document['Picture']}"),
              radius: 40.0,
            ),
            SizedBox(
              width: 10.0,
            ),
            Column(
              children: <Widget>[
                Text(document['name']),
                Text('subtitle'),
              ],
            )
          ],
        ),
      ),
    );

您可以使用类似这样的东西。

Answer 3

我认为您正在尝试显示数据列表，但是我不确定您是否真的需要卡片样式，因为您的卡片没有间隙。对于您的设计，可以使用具有leading的圆形图片或化身，title，subtitle和trailing的列表图块。这是一个例子

return new Card(
  child: ListTile(        
    leading: CircleAvatar(
          backgroundColor: Colors.grey,
          backgroundImage: new NetworkImage("${document['Picture']}"),
          radius: 40.0,
        ),
    title: Text(document['name']),
    subtitle: Text('subtitle'),              
    ),
);

无卡

return ListTile(        
    leading: CircleAvatar(
          backgroundColor: Colors.grey,
          backgroundImage: new NetworkImage("${document['Picture']}"),
          radius: 40.0,
        ),
    title: Text(document['name']),
    subtitle: Text('subtitle'),              
);

Answer 4

 title: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
    Text(
      "Title",
      style: TextStyle(color: Colors.white, fontSize: 16.0),
    ),
    Text(
      'Sub Title',
      style: TextStyle(color: Colors.white, fontSize: 14.0),
    ),
  ]),

这是在Appbar中使用SubTitle的最终决定

在我的颤动代码中添加字幕

4 个答案: