Flutter中展示dialog 并将dialog中的数据回传到界面上 更新界面显示 用到类:future await async
大致操作如动图所示布局代码// 选择部门InkWell(// 包裹后设置点击事件onTap: _pickDept,child: Row(children: <Widget>[Image(image: AssetImage("assets/images/ic_login_select_depar...
·

大致操作如动图所示
布局代码
// 选择部门
InkWell(
// 包裹后设置点击事件
onTap: _pickDept,
child: Row(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/ic_login_select_depart.png"),
width: 23,
height: 23,
),
Expanded(
child: Text(
"$deptName",
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
Image(
image: AssetImage("assets/images/ic_login_down.png"),
width: 23,
height: 23,
),
],
),
),
显示弹框方法
// 展示选择部门dialog
Future<String> _showPickDeptDialog() async {
var deptList = [
'杭州一店',
"杭州二店",
"杭州三店",
"杭州四店",
'杭州一店',
"杭州二店",
"杭州三店",
"杭州四店",
'杭州一店',
"杭州二店",
"杭州三店",
"杭州四店",
'杭州一店',
"杭州二店",
"杭州三店",
"杭州四店",
'杭州一店',
"杭州二店",
"杭州三店",
"杭州四店",
'杭州一店',
"杭州二店",
"杭州三店",
"杭州四店",
'杭州一店',
"杭州二店",
"杭州三店",
"杭州四店"
];
// 弹框并获取选择结果
var selectDept = await showDialog(
context: context,
builder: (context) {
return SimpleDialog(
children: deptList.map((str) {
return SimpleDialogOption(
child: Row(
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.amber,
),
SizedBox(
width: 8,
height: 48,
),
Text(
str,
style: TextStyle(fontSize: 18),
)
],
),
onPressed: () {
// 返回对话框选择结果
Navigator.of(context).pop(str);
},
);
}).toList(),
);
});
return selectDept;
}
按钮点击方法
// 选择部门 从选择部门弹框种获取返回值
void _pickDept() {
_showPickDeptDialog().then((String selectDept) {
print(deptName);
setState(() {
deptName = selectDept;
});
});
}
更多推荐


所有评论(0)