在这里插入图片描述

大致操作如动图所示
布局代码
// 选择部门
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;
    });
  });
}
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐