时间戳

首页 > 解决方案 > 带模态的扩展瓷砖

flutter - 带模态的扩展瓷砖

问题描述

我正在尝试制作自定义扩展磁贴，如果单击孩子，则显示和图像作为模式。

例如，如果我单击Hat no 1，我希望显示一个图像，如果我单击Hat no 2，我希望显示一个不同的图像，等等

我该怎么做？

这是我的清单

_buildExpandableContent(Clothes clothes) {
    List<Widget> columnContent = [];
    for (String content in clothes.contents)
      columnContent.add(
        new ListTile(
          title: new Text(content, style: new TextStyle(fontSize: 20.0),),
          trailing: new Icon (Icons.keyboard_arrow_right, color: Colors.black, size: 30),
        ),
      );
    return columnContent;
  }
}

class Clothes {
  final String title;
  List<String> contents = [];
  Clothes(this.title, this.contents);
}

List<Clothes> clothes = <Clothes>[
  new Clothes(
    'Hats',
    ['Hat no. 1', 'Hat no. 2', 'Hat no. 3', 'Hat no. 4'],
  ),
];

这是身体

 body: ListView.builder(
          itemCount: clothes.length,
          itemBuilder: (context, i) {
            return Container(
                margin: EdgeInsets.only(top: 15),
                child: SingleChildScrollView(
                    child: Padding(
                      padding: EdgeInsets.all(17.0),
                      child: Column(
                        children: <Widget>[
                          Container(
                            color: Colors.blueAccent,
                            child: new ExpansionTile(
                              trailing: Icon (Icons.keyboard_arrow_down_rounded, color: Colors.white, size: 30),
                              title: new Text(clothes[i].title, style: new TextStyle(color: Colors.white, fontSize: 20,),),
                              children: <Widget>[
                                Container(
                                  color:white,
                                  child: new Column(
                                    children: _buildExpandableContent(clothes[i]),
                                  ),
                                ),
                              ],
                            ),
                          )
                        ]
                      ),
                    ),
                ),
            );
          },
        ),

标签： flutterdartflutter-layout

解决方案

class您可以为具有内容和图像源的衣服项目创建一个新项目：

class Clothes {
  final String title;
  List<ClothesItem> items = [];
  Clothes(this.title, this.items);
}

class ClothesItem {
  String content;
  String imgSrc;
  ClothesItem(this.content, this.imgSrc);
}

List<Clothes> clothes = <Clothes>[
  new Clothes(
    'Hats',
    [
      ClothesItem('Hat no. 1', 'https://picsum.photos/200'),
      ClothesItem('Hat no. 2', 'https://picsum.photos/200'),
      ClothesItem('Hat no. 3', 'https://picsum.photos/200'),
      ClothesItem('Hat no. 4', 'https://picsum.photos/200')
    ],
  ),
];

然后你需要修改ListTiles 并设置showDialog为它的onTap方法，这个对话框显示相应的图像：

 _buildExpandableContent(Clothes clothes) {
    List<Widget> columnContent = [];
    for (ClothesItem item in clothes.items)
      columnContent.add(
        new ListTile(
          title: new Text(
            item.content,
            style: new TextStyle(fontSize: 20.0),
          ),
          trailing: new Icon(Icons.keyboard_arrow_right,
              color: Colors.black, size: 30),
          onTap: () => showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(content: Image.network(item.imgSrc));
              }),
        ),
      );
    return columnContent;
  }

推荐阅读