flutter - Dismissible 容器和 ListView 项大小不同
问题描述
我刚开始学习flutter并正在尝试构建一个待办事项应用程序，我遇到的问题是Dismissible容器和待办事项列表视图项的高度不同，在尝试了所有方法后我仍然无法修复它，下一个问题是待办事项项目将从左到右解除，而容器会上升。任何帮助将非常感激。我的代码：
class _HomePageState extends State<HomePage> {
List todos = [];
List<TextEditingController> _titleController = [];
List<TextEditingController> _detailController = [];
@override
void initState() {
super.initState();
todos.add('');
_titleController.add(TextEditingController());
_detailController.add(TextEditingController());
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 24.0,
),
color: const Color(0xfff6f6f6f6),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(bottom: 32.0, top: 32.0),
child: const Text(
"Reminders",
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold
),
),
),
Expanded(
child: ListView.builder(
itemCount: todos.length,
physics: const BouncingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Dismissible(
background: buildActionSwipeLeft(),
onDismissed: (direction) {
setState(() {
todos.removeAt(index);
_titleController.removeAt(index);
_detailController.removeAt(index);
DismissDirection.startToEnd;
});
},
direction: DismissDirection.startToEnd,
key: Key(todos[index]),
child: Padding(
padding: const EdgeInsets.only(
bottom: 15.0
),
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
elevation: 4,
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
vertical: 15.0,
horizontal: 24.0
),
margin: const EdgeInsets.only(
bottom: 20.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
cursorColor: Colors.black,
controller: _titleController[index],
style: const TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold
),
decoration: const InputDecoration(
hintText: "Enter a title",
border: InputBorder.none,
),
),
const Divider(
color: Colors.black,
),
Padding(
padding: const EdgeInsets.only(top: 0.0),
child: TextField(
controller: _detailController[index],
style: TextStyle(
fontSize: 20.0,
color: Colors.grey[900],
),
cursorColor: Colors.black,
maxLines: null,
decoration: const InputDecoration(
hintText: "Enter the description",
label: Text("description"),
border: InputBorder.none
),
),
),
],
),
),
),
),
);
},
),
)
],
),
Positioned(
bottom: 24.0,
right: 0.0,
child: GestureDetector(
onTap: () {
setState(() {
todos.add('');
_titleController.add(TextEditingController());
_detailController.add(TextEditingController());
});
},
child: Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.circular(20.0),
),
child: const Icon(Icons.add, color: Colors.white, size: 35.0),
),
),
)
],
),
),
),
);
}
}
Widget buildActionSwipeLeft() => Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.red,
),
padding: const EdgeInsets.symmetric(horizontal: 30),
child: const Icon(Icons.delete, color: Colors.white, size: 30),
);
解决方案
class _HomePageState extends State<HomePage> {
List todos = [];
List<TextEditingController> _titleController = [];
List<TextEditingController> _detailController = [];
@override
void initState() {
super.initState();
todos.add('');
_titleController.add(TextEditingController());
_detailController.add(TextEditingController());
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 24.0,
),
color: const Color(0xfff6f6f6f6),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(bottom: 32.0, top: 32.0),
child: const Text(
"Reminders",
style: TextStyle(
fontSize: 25.0, fontWeight: FontWeight.bold),
),
),
Expanded(
child: ListView.builder(
itemCount: todos.length,
physics: const BouncingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Stack(
clipBehavior: Clip.hardEdge,
children: [
Padding(
padding: const EdgeInsets.only(top:10.0,left: 8.0, right: 8.0),
child: buildActionSwipeLeft(),
),
Dismissible(
onDismissed: (direction) {
setState(() {
todos.removeAt(index);
_titleController.removeAt(index);
_detailController.removeAt(index);
DismissDirection.startToEnd;
});
},
direction: DismissDirection.startToEnd,
key: UniqueKey(),
child: Padding(
padding: const EdgeInsets.only(bottom: 15.0),
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
elevation: 4,
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
vertical: 15.0, horizontal: 24.0),
margin: const EdgeInsets.only(
bottom: 20.0,
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
TextField(
cursorColor: Colors.black,
controller: _titleController[index],
style: const TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold),
decoration: const InputDecoration(
hintText: "Enter a title",
border: InputBorder.none,
),
),
const Divider(
color: Colors.black,
),
Padding(
padding:
const EdgeInsets.only(top: 0.0),
child: TextField(
controller:
_detailController[index],
style: TextStyle(
fontSize: 20.0,
color: Colors.grey[900],
),
cursorColor: Colors.black,
maxLines: null,
decoration: const InputDecoration(
hintText:
"Enter the description",
label: Text("description"),
border: InputBorder.none),
),
),
],
),
),
),
),
)
],
);
},
),
)
],
),
Positioned(
bottom: 24.0,
right: 0.0,
child: GestureDetector(
onTap: () {
setState(() {
todos.add('');
_titleController.add(TextEditingController());
_detailController.add(TextEditingController());
});
},
child: Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.circular(20.0),
),
child:
const Icon(Icons.add, color: Colors.white, size: 35.0),
),
),
)
],
),
),
),
);
}
}
Widget buildActionSwipeLeft() => Container(
height: 180,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.red,
),
padding: const EdgeInsets.only(left: 30),
child: const Icon(Icons.delete, color: Colors.white, size: 30),
);
实现这一点的缺点是会丢失一些动画。将研究更多：
推荐阅读
- c# - c#在并发任务执行之间添加延迟
- html - 如何将html表格分成两部分？
- docker - 既然我们在配置服务时有这个选项，那么 Kubernetes 部署端口配置有什么用？
- android - Android 应用程序不使用 firebase 启动意图
- google-apps-script - 谷歌表格中的getLastRow问题
- json - 如何在 Spring Boot Response 中获取没有转义字符的 JSON？
- android - 如何在输入值时动态更改文本字段的宽度
- c++ - 窗体 ShowDialog 函数错误，不执行下面的语句
- python-3.x - 为什么 value_counts()[:10] 会抛出错误？
- mysql - 在 php+sql 中获取回复系统的级别