我要在附件图像中进行如下所示的可扩展列表视图。如何在扑打中实现这种功能?

拉维·阿格劳瓦尔(Ravi Agrawal)

可扩展用例以实现

我该如何实现?我尝试自定义ExpansionTile,但无法在扩展和折叠上获得类似的效果。主要是前缀图标的大小较大,因此可扩展文本不接近日期。此外,用于扩展/折叠的后缀图标并未完全覆盖背景色。

我还附有我尝试过的图像。我已经使用https://pub.dev/packages/expandable#-readme-tab-达到了类似的效果,但是没有运气。在此处输入图片说明

我真的被困在这个地方,需要任何帮助。您的帮助将不胜感激。谢谢。

赵chi

刚刚实施,请尝试以下操作:

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,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        },
      ),

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Android中进行如下所示的控件?

来自分类Dev

如何在Android中进行如下所示的控件?

来自分类Dev

如何在 iOS 中实现如下图所示的搜索功能?

来自分类Dev

如何实现多级可扩展列表视图搜索功能?

来自分类Dev

我如何在扑打中使用动物群数据库?

来自分类Dev

如何在拍打中进行分页无限滚动

来自分类Dev

我如何在Android中创建如下所示的循环条

来自分类Dev

我如何在Swift中实现这种圆形视图

来自分类Dev

如何在可扩展的回收视图上实现 onclicklistener

来自分类Dev

我如何创建如下图所示的plist?

来自分类Dev

Android:可扩展列表视图实现

来自分类Dev

如何在熊猫中进行这种聚合?

来自分类Dev

如何在图像下方放置一个轮廓矩形,如下图所示

来自分类Dev

如何在Sybase中获得预期的结果,如下列表sql所示,删除未更改的行

来自分类Dev

需要在导航抽屉内显示可扩展列表视图

来自分类Dev

如何创建自定义标签视图,如下所示

来自分类Dev

如何创建自定义标签视图,如下所示

来自分类Dev

我如何理解列表的这种Traversable实现

来自分类Dev

我该如何在R中进行这种图形处理?非统计数字

来自分类Dev

如何在Haskell中进行跨度扩展?

来自分类Dev

如何在python中进行chrome扩展?

来自分类Dev

如何在Swift中进行通用扩展?

来自分类Dev

如何在Xamarin.Forms中进行可绑定的标记扩展

来自分类Dev

如何在不使用 \n 或 html 格式的情况下在 android 中格式化如下所示的单个文本视图?

来自分类Dev

如何编写查询以获取输出,如下所示在我的SQL

来自分类Dev

如何在c ++中执行随机结果,如下所示?

来自分类Dev

如何在javascript中创建如下所示的数组

来自分类Dev

如何在Sympy中进行功能组合?

来自分类Dev

如何在css中进行图像裁剪

Related 相关文章

  1. 1

    如何在Android中进行如下所示的控件?

  2. 2

    如何在Android中进行如下所示的控件?

  3. 3

    如何在 iOS 中实现如下图所示的搜索功能?

  4. 4

    如何实现多级可扩展列表视图搜索功能?

  5. 5

    我如何在扑打中使用动物群数据库?

  6. 6

    如何在拍打中进行分页无限滚动

  7. 7

    我如何在Android中创建如下所示的循环条

  8. 8

    我如何在Swift中实现这种圆形视图

  9. 9

    如何在可扩展的回收视图上实现 onclicklistener

  10. 10

    我如何创建如下图所示的plist?

  11. 11

    Android:可扩展列表视图实现

  12. 12

    如何在熊猫中进行这种聚合?

  13. 13

    如何在图像下方放置一个轮廓矩形,如下图所示

  14. 14

    如何在Sybase中获得预期的结果,如下列表sql所示,删除未更改的行

  15. 15

    需要在导航抽屉内显示可扩展列表视图

  16. 16

    如何创建自定义标签视图,如下所示

  17. 17

    如何创建自定义标签视图,如下所示

  18. 18

    我如何理解列表的这种Traversable实现

  19. 19

    我该如何在R中进行这种图形处理?非统计数字

  20. 20

    如何在Haskell中进行跨度扩展?

  21. 21

    如何在python中进行chrome扩展?

  22. 22

    如何在Swift中进行通用扩展?

  23. 23

    如何在Xamarin.Forms中进行可绑定的标记扩展

  24. 24

    如何在不使用 \n 或 html 格式的情况下在 android 中格式化如下所示的单个文本视图?

  25. 25

    如何编写查询以获取输出,如下所示在我的SQL

  26. 26

    如何在c ++中执行随机结果,如下所示?

  27. 27

    如何在javascript中创建如下所示的数组

  28. 28

    如何在Sympy中进行功能组合?

  29. 29

    如何在css中进行图像裁剪

热门标签

归档