如何解决在 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 举报,一经查实,本站将立刻删除。