我想在附图中执行如下所示的可扩展列表视图。我怎样才能在 flutter 中实现这种类型的功能？

Question

我怎样才能做到这一点？。我试过自定义 ExpansionTile 但无法在展开和折叠时获得类似的效果。主要是前缀图标尺寸较大，因此可扩展文本离日期不近。此外，expanding/collapsing 的后缀图标未完全被背景颜色覆盖。

我还附上了一张我试过的图片。我用 https://pub.dev/packages/expandable#-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,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        },
      ),