我想做如下图所示的可扩展列表视图。如何在flutter中实现这种类型的功能？

Question

我如何才能实现这个功能？我已经尝试过自定义ExpansionTile，但无法在展开和折叠上获得类似的效果。主要是前缀图标的大小比较大，所以可展开的文字与日期不接近。另外，扩展折叠的后缀图标没有完全覆盖背景色。

我也附上一张图片，我已经试过了。我已经使用了 https:/pub.devpackagesexpandable#-readme-tab-。 以达到类似的效果，但没有运气。

我真的卡在这个地方，希望得到任何帮助.您的帮助将是感激的.谢谢。

Answer 1

刚实现，试试这个。

ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return ExpandableNotifier(
            child: Card(
              elevation: 4,
              child: Expandable(
                collapsed: Container(
                  width: MediaQuery.of(context).size.width,
                  height: 105,
                  child: ExpandableButton(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: ClipOval(
                            child: Container(
                              height: 80,
                              width: 80,
                              color: Colors.yellow,
                            ),
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.symmetric(vertical: 20),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  'Welkom bij Haaer',
                                  style: TextStyle(
                                    fontSize: 14.0,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                Text(
                                  '2019/06/01 11:04',
                                  style: TextStyle(
                                    color: Colors.grey,
                                    fontSize: 12.0,
                                  ),
                                ),
                                Text(
                                  'blablablablablablablablablablablablablablablablablablablablablabla'
                                  'blablablablablablablablablablablablablablablablablablablablablabla'
                                  'blablablablablablablablablablablablablablablablablablablablablabla',
                                  softWrap: true,
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                ),
                              ],
                            ),
                          ),
                        ),
                        Container(
                          color: Colors.yellow,
                          width: 30,
                          height: 105,
                          child: Icon(
                            Icons.keyboard_arrow_right,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                expanded: Container(
                  height: 200,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.all(10),
                        child: ClipOval(
                          child: Container(
                            height: 80,
                            width: 80,
                            color: Colors.purple,
                          ),
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.symmetric(vertical: 20),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                'Welkom bij Haaer',
                                style: TextStyle(
                                  fontSize: 14.0,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Text(
                                '2019/06/01 11:04',
                                style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 12.0,
                                ),
                              ),
                              Text(
                                'blablablablablablablablablablablablablablablablablablablablablabla'
                                'blablablablablablablablablablablablablablablablablablablablablabla'
                                'blablablablablablablablablablablablablablablablablablablablablabla',
                                softWrap: true,
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Container(
                                width: 80,
                                height: 20,
                                child: RaisedButton(
                                  padding: EdgeInsets.all(0),
                                  color: Colors.purple,
                                  child: Text('show'),
                                  onPressed: () {},
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      ExpandableButton(
                        child: Container(
                          color: Colors.purple,
                          width: 30,
                          height: 200,
                          child: Icon(
                            Icons.keyboard_arrow_down,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        },
      ),