微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在 Flutter 中使用 Dismissible 小部件时,ListTile 覆盖父容器

如何解决在 Flutter 中使用 Dismissible 小部件时,ListTile 覆盖父容器

我有一个 ListTile 包裹在一个容器中,当我用 dismissible 包裹它并滑动时,它会重叠并越过主容器。如这张 gif 所示。 1

这是我的主容器的代码

Container(
                    height: 500,width: 500,decoration: Boxdecoration(
                        borderRadius: BorderRadius.circular(10),color: Colors.white),child: FutureBuilder<List<EntryRecord>>(
                      future: _getAllRecords(user),builder:
                          (BuildContext context,AsyncSnapshot snapshot) {
                        if (snapshot.hasData) {
                          return ListView.builder(
                   
                              itemCount: snapshot.data.length,itemBuilder:
                                  (BuildContext context,int index) {
                                return dismissible(
                                  direction: dismissDirection.endToStart,key: ObjectKey(snapshot.data[index]),ondismissed: (direction) {
                                    ScaffoldMessenger.of(context)
                                        .showSnackBar(
                                      SnackBar(
                                        content: Text(
                                            "${snapshot.data[index].number} has been deleted"),),);
                                  },child: EntryCard(
                                    record: snapshot.data[index],index: index,);
                              });
                        } else {
                          return Center(
                            child: CircularProgressIndicator(),);
                        }
                      },)

这是 EntryCard 小部件的代码(使用 ListView.builder 构建的)

class EntryCard extends StatelessWidget {


EntryRecord record;
  int index;
  EntryCard({Key key,this.record,this.index}) : super(key: key);
  List<Color> colors = [kLightOrange,kLightPurple,kLightBlue,kLightPink];
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),decoration: Boxdecoration(
        gradient: LinearGradient(
            colors: [Colors.white,TinyColor(colors[index]).darken(8).color],begin: Alignment.centerLeft,end: Alignment.centerRight),borderRadius: BorderRadius.circular(20),child: ListTile(
        onTap: () {},title: Text(
          record.title,style: TextStyle(
              color: TinyColor(colors[index]).darken(30).color,fontWeight: FontWeight.w500),subtitle: Text(record.url,style: TextStyle(color: Colors.grey,fontWeight: FontWeight.w500)),leading: Container(
          decoration: Boxdecoration(
              borderRadius: BorderRadius.circular(15),color: TinyColor(colors[index]).darken(30).color),alignment: Alignment.center,width: 80,height: 200,child: Padding(
            padding: const EdgeInsets.all(8.0),child: Text(
              record.number.toString(),textAlign: TextAlign.center,overflow: TextOverflow.ellipsis,style: TextStyle(
                  color: Colors.white,fontSize: 20,fontWeight: FontWeight.w900),trailing: Icon(
          Icons.share_outlined,color: Colors.white,// tileColor: Color(0xFFF2784B),);
  }
}

我什至尝试在 dismissible 小部件中仅扭曲 ListTile 小部件,它给了我类似的结果。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。