dart - Flutter Dismissible 不工作
问题描述
只是尝试构建一个带有列表的简单应用程序，您可以在列表中点击以转到详细信息页面，向左和向右滑动以执行一些操作。
列表页面的代码如下。但是，一旦我添加了 Dismissible，点击停止工作并且刷卡也不起作用。
当我启用 debugPaintPointersEnabled 时，列表图块（行）只是不响应任何点击。奇怪的是，我正在使用这个示例，代码几乎相同，但不知道为什么我的代码不起作用但示例有效。任何建议将不胜感激！谢谢！
import 'package:flutter/material.dart';
import 'package:xxx/routes/utils.dart';
import 'package:xxxx/models/SomeItem.dart';
import 'SomeItem_DoSth.dart';
import 'package:xxxxxh/constants.dart';
class SomeItemListRoute extends StatefulWidget {
@override
_SomeItemListState createState() => new _SomeItemListState();
}
class _SomeItemListState extends State<SomeItemListRoute> {
List<SomeItem> SomeItemList;
@override
Widget build(BuildContext context) {
SomeAppDb.get().getSomeItems().then((SomeItems) {
if (SomeItems != null) {
setState(() {
SomeItemList = SomeItems;
});
}
});
if (SomeItemList == null || SomeItemList.length <= 0) {
return emptyView("No items yet");
}
return new Container(
child: new ListView.builder(
itemCount: SomeItemList.length,
itemBuilder: (context, index) {
return new Dismissible(
key: new ObjectKey(SomeItemList[index]),
onDismissed: (DismissDirection direction) {
var taskID = SomeItemList[index].id;
setState(() {
SomeItemList.removeAt(index);
});
if (direction == DismissDirection.endToStart) {
SomeAppDb
.get()
.updateSomeItemStatus(taskID, SomeItemStatus.COMPLETE)
.then((value) {
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text("Completed"),
backgroundColor: Colors.green));
});
} else {
SomeAppDb.get().deleteSomeItem(taskID).then((value) {
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text("Deleted"),
backgroundColor: Colors.red));
});
}
},
background: new Container(
color: Colors.red,
child: new ListTile(
leading: new Icon(Icons.delete, color: Colors.white),
),
),
secondaryBackground: new Container(
color: Colors.green,
child: new ListTile(
trailing: new Icon(Icons.check, color: Colors.white),
),
),
child: SomeItemRow(SomeItemList[index]));
},
));
}
}
class SomeItemRow extends StatelessWidget {
SomeItem SomeItem;
static final date_label = "Date";
SomeItemRow(SomeItem) {
this.SomeItem = SomeItem;
}
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(
builder: (context) {
return SomeItemDoSthRoute();
},
));
},
child: Column(
children: <Widget>[
new Container(
margin: const EdgeInsets.symmetric(vertical: PADDING_TINY),
decoration: new BoxDecoration(
border: new Border(
left: new BorderSide(
width: 4.0,
color: Colors.blue,
),
),
),
child: new Padding(
padding: const EdgeInsets.all(PADDING_SMALL),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(
left: PADDING_SMALL, bottom: PADDING_VERY_SMALL),
child: new Text(SomeItem.DoSthNo,
style: new TextStyle(
fontSize: FONT_SIZE_TITLE,
fontWeight: FontWeight.bold)),
),
new Container(),
new Padding(
padding: const EdgeInsets.only(
left: PADDING_SMALL, bottom: PADDING_VERY_SMALL),
child: new Row(
children: <Widget>[
new Text(
"Date Placeholder",
style: new TextStyle(
color: Colors.grey, fontSize: FONT_SIZE_DATE),
key: new Key(date_label),
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text('Consignee Placeholder',
style: new TextStyle(
color: Colors.grey,
fontSize: FONT_SIZE_LABEL)),
new Container(
margin: const EdgeInsets.symmetric(
horizontal: 8.0),
width: 8.0,
height: 8.0,
child: new CircleAvatar(
backgroundColor: Colors.red,
),
)
],
),
],
),
)
],
),
),
],
),
),
),
new Container(
decoration: new BoxDecoration(
border: new Border(
bottom: new BorderSide(
width: 0.5,
color: Colors.grey,
),
),
))
],
));
}
}
解决方案
就像上面评论的 nomad 一样，你的代码有太多的个人变量，使得其他人很难重现你的确切问题。我能够拥有类似于您上面的功能的 Dismissible。我建议您首先从一个工作布局开始，如下面的代码，然后一次添加更多功能以找出破坏布局的原因。从仅使用硬编码值的演示开始，然后使用模拟数据，然后添加这些函数调用，最后用数据库中的真实数据替换模拟数据。当您找到确切的原因时，您要么知道如何解决它，要么可以发布更明智的问题。
import'package:flutter/material.dart';
class SwipeLeftRightDismissible extends StatefulWidget {
@override
_SwipeLeftRightDismissibleState createState() {
return new _SwipeLeftRightDismissibleState();
}
}
class _SwipeLeftRightDismissibleState extends State<SwipeLeftRightDismissible> {
List<String> _itemList;
@override
void initState() {
super.initState();
_itemList = ["first", "second", "third", "fourth"];
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
child: new ListView.builder(
itemCount: _itemList.length,
itemBuilder: (context, index) {
return new Dismissible(
key: new ObjectKey(_itemList[index]),
child: ItemRow(_itemList[index]),
onDismissed: (direction) {
setState(() {
_itemList.removeAt(index);
});
if (direction == DismissDirection.endToStart) {
debugPrint("dismiss end to start");
} else {
debugPrint("dismiss start to end");
}
},
background: new Container(
color: Colors.red,
child: new ListTile(
leading: new Icon(Icons.delete, color: Colors.white),
),
),
secondaryBackground: new Container(
color: Colors.green,
child: new ListTile(
trailing: new Icon(Icons.check, color: Colors.white),
),
),
);
}
),
),
);
}
}
class ItemRow extends StatelessWidget {
final String item;
ItemRow(this.item);
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: () {
Navigator.push(context, new MaterialPageRoute(
builder: (context) => new SwipeLeftRightDismissible()));
},
child: Column(
children: <Widget>[
new Container(
margin: const EdgeInsets.symmetric(vertical: 4.0),
decoration: new BoxDecoration(
border: new Border(
left: new BorderSide(
width: 4.0,
color: Colors.blue,
),
),
),
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(
left: 8.0, bottom: 4.0),
child: new Text(item,
style: new TextStyle(
fontWeight: FontWeight.bold)),
),
new Container(),
new Padding(
padding: const EdgeInsets.only(
left: 4.0, bottom: 4.0),
child: new Row(
children: <Widget>[
new Text(
"Date Placeholder",
style: new TextStyle(
color: Colors.grey, ),
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Text("column 1"),
new Text("column 2"),
],
),
)
],
),
),
],
),
),
),
new Container(
decoration: new BoxDecoration(
border: new Border(
bottom: new BorderSide(
width: 0.5,
color: Colors.grey,
),
),
))
],
),
);
}
}
推荐阅读
- java - Java 11 GC 日志记录
- python - 从特定函数 Python 创建 DataFrame
- swift - 将剩余时间减去两次 - Swift
- embedded-linux - Systemd-journald 磁盘磨损
- c# - Xamarin 形成 WebView 丢失 Session/Cookie
- python - 几个numpy数组到单个熊猫数据帧
- jquery - Laravel Jquery Dependent 下拉菜单显示错误 GET http://localhost:8000/dosen/pengajuan/getKK/4 404 (Not Found)
- r - 如何从字符串中提取一个或多个单词并在两个不同的列中搜索它们形成R中的另一个文件
- javascript - 如何使用javascript从网页中获取点击或选择的文本？
- ansible - 如何让 Ansible 和 Yum 一起工作？