Question

我想在每个ListTile中添加Card小部件。我在哪里插入它。这是我的整个代码段。

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: StreamBuilder<List>(
        stream: _streamController.stream,
        builder: 
        (BuildContext context, AsyncSnapshot snapshot) {
        
          if (snapshot.hasData)
            return ListView(
              children: [
                for (Map document in snapshot.data)
             ListTile(
                contentPadding:
                EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                leading: Container(
                  padding: EdgeInsets.only(right: 12.0),
                  decoration: new BoxDecoration(
                      border: new Border(
                          right: new BorderSide(width: 1.0, color: Colors.cyan))),
                  child: Icon(Icons.notifications, color: Colors.cyan),
                  ),
                    title: Text("Announcement"
                 ),
                    subtitle:  (document['type']=="Announcement")?Text("Management posted new announcement."):Text('None'),
               trailing:
               Icon(Icons.keyboard_arrow_right, color: Colors.cyan, size: 30.0),
                onTap: () {
                },
                  ),
               
              ],
            );
          return new CircularProgressIndicator();
        },
      ),
    );
  }

我想添加Card小部件进行布局。请帮忙。任何答案将不胜感激，在此先感谢！

Answer 1

基本上任何小部件都可以是Card，但是根据您的要求，“ title”或“ subtitle”可以是Card。我编辑了您的代码，并将Card添加到字幕中，结果如下。

    ListTile(
        contentPadding:
            EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        leading: Container(
          padding: EdgeInsets.only(right: 12.0),
          decoration: new BoxDecoration(
            border: new Border(
              right: new BorderSide(width: 1.0, color: Colors.black),
            ),
          ),
          child: Icon(Icons.notifications, color: Colors.black),
        ),
        tileColor: Colors.grey,
        title: Padding(
          padding: EdgeInsets.only(left: 5),
          child: Text(
            "ANNOUCEMENT",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        subtitle: Card(
          child: Container(
            height: 50,
            child: Text("Management posted new announcement."),
          ),
        ),
        trailing: Icon(Icons.keyboard_arrow_right,
            color: Colors.black, size: 30.0),
        onTap: () {},
      ),

Answer 2

将ListTile包装在Card小部件中，如下所示：

    ListView(
          children: [
            for (Map document in snapshot.data)
         Card(
           child: ListTile(
              contentPadding:
              EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
              leading: Container(
                padding: EdgeInsets.only(right: 12.0),
                decoration: new BoxDecoration(
                    border: new Border(
                        right: new BorderSide(width: 1.0, color: Colors.cyan))),
                    child: Icon(Icons.notifications, color: Colors.cyan),
                   ),
                  title: Text("Announcement"),
                  subtitle:  (document['type']=="Announcement")?Text("Managementposted 
                         new announcement."):Text('None'),                
                    trailing:
                    Icon(Icons.keyboard_arrow_right, color: Colors.cyan, size: 30.0),
              onTap: () {},
                ),
         ),
           
          ],
        )

将卡添加到列表视图抖动

2 个答案: