外出的可拒绝内容
Dismissible content going outside
我有一个带有小部件列表的屏幕,每个小部件都是一个内部有 ListTile 的 Dismissible,但是当我滑动时,内容向外移动(如红色箭头所指),这可能是因为Dismissible 周围的填充。有办法解决吗?
你没有在你的问题中给出你的代码示例,所以我制作了这种类型的小部件来解决这个问题。请参考代码,(可能对你有帮助),
class _MyHomePageState extends State<MyHomePage> {
final itemsList = List<String>.generate(10, (n) => "List item ${n}");
ListView generateItemsList() {
return ListView.builder(
itemCount: itemsList.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
child: Dismissible(
key: Key(itemsList[index]),
background: slideRightBackground(),
secondaryBackground: slideLeftBackground(),
child: InkWell(
onTap: () {
print("${itemsList[index]} clicked");
},
child: ListTile(
tileColor: Colors.yellow,
title: Text('${itemsList[index]}'))),
),
);
}
);
}
Widget slideRightBackground() {
return Container(
color: Colors.green,
child: Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 20,
),
Icon(
Icons.edit,
color: Colors.white,
),
Text(
" Edit",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.left,
),
],
),
alignment: Alignment.centerLeft,
),
);
}
Widget slideLeftBackground() {
return Container(
color: Colors.red,
child: Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(
Icons.delete,
color: Colors.white,
),
Text(
" Delete",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.right,
),
SizedBox(
width: 20,
),
],
),
alignment: Alignment.centerRight,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: generateItemsList(),
);
}
}
输出:
我有一个带有小部件列表的屏幕,每个小部件都是一个内部有 ListTile 的 Dismissible,但是当我滑动时,内容向外移动(如红色箭头所指),这可能是因为Dismissible 周围的填充。有办法解决吗?
你没有在你的问题中给出你的代码示例,所以我制作了这种类型的小部件来解决这个问题。请参考代码,(可能对你有帮助),
class _MyHomePageState extends State<MyHomePage> {
final itemsList = List<String>.generate(10, (n) => "List item ${n}");
ListView generateItemsList() {
return ListView.builder(
itemCount: itemsList.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
child: Dismissible(
key: Key(itemsList[index]),
background: slideRightBackground(),
secondaryBackground: slideLeftBackground(),
child: InkWell(
onTap: () {
print("${itemsList[index]} clicked");
},
child: ListTile(
tileColor: Colors.yellow,
title: Text('${itemsList[index]}'))),
),
);
}
);
}
Widget slideRightBackground() {
return Container(
color: Colors.green,
child: Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 20,
),
Icon(
Icons.edit,
color: Colors.white,
),
Text(
" Edit",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.left,
),
],
),
alignment: Alignment.centerLeft,
),
);
}
Widget slideLeftBackground() {
return Container(
color: Colors.red,
child: Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(
Icons.delete,
color: Colors.white,
),
Text(
" Delete",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.right,
),
SizedBox(
width: 20,
),
],
),
alignment: Alignment.centerRight,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: generateItemsList(),
);
}
}
输出: