Flutter UI - 弹窗系 Widget

Flutter 里面的谭庄无论是重量级的仍是轻量级的都在这里了：

• DropdownButton - 下拉菜单按钮
• PopupMenuButton - 弹出菜单按钮
• ``
• ``
• ``

---

DropdownButton

DropdownButton 是一个简单的下拉选择框，构建特色：

• 无论是 hint 的样式仍是 可选择 的样式都是 widget
• 每一项都是特定的 widget 类型：DropdownMenuItem，你们在其内部再写具体的 widget 样式，不过样式是本身写，可是 DropdownMenuItem 内部有个 value 对应该选项的值，这个必需要写的
• 当前选项的变化须要咱们本身维护，DropdownButton 是不会帮咱们作的

图是随便找的：

主要属性以下：

• hint - 默认样式
• items - 选项样式，注意是值是列表类型
• value - 当前选中的那项
• onChanged - 选中事件

class TestWidgetState extends State<TestWidget> {
  String selectValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      hint: Text("请选择您要的号码:"),
      items: getItems(),
      value: selectValue,
      onChanged: (value) {
        print(value);
        setState(() {
          selectValue = value;
        });
      },
    );
  }

  getItems() {
    var items = List<DropdownMenuItem<String>>();
    items.add(DropdownMenuItem(child: Text("AA"), value: "11"));
    items.add(DropdownMenuItem(child: Text("BB"), value: "22",));
    items.add(DropdownMenuItem(child: Text("CC"), value: "33",));
    items.add(DropdownMenuItem(child: Text("DD"), value: "44",));
    items.add(DropdownMenuItem(child: Text("EE"), value: "55",));
    return items;
  }
}
复制代码

这里有个泛型的点要注意，咱们声明 DropdownMenuItem 选项列表时要指定数值类型 List<DropdownMenuItem<String>>()，要不 selectValue 那里就不能写具体的数值类型，只能写 var 了

---

PopupMenuButton

PopupMenuButton android 里的 PopupWindow 你们很熟悉吧，这个就是 Flutter 版的

样式图：

主要参数：

• itemBuilder 构建弹出菜单样式，是 list 结构的数据，使用 PopupMenuItem 承载每一个 item ，可是 list 外层的泛型要用 List<PopupMenuEntry<String>>，很是蛋疼，说实话 itemBuilder这里的 API 我是真不喜欢，太难用了，和DropdownButton的设计都不统一，对于itemBuilder内部的实现类谁关心呢，根本就不该该把PopupMenuEntry` 暴露出来。写法固定的，你们记住吧

• elevation 阴影高度

• padding 边距

• child 按钮样式和 icon 互斥，只能用一个

• icon 按钮样式和 child 互斥，只能用一个

• offset 偏移量，offset 的值>100 好比：offset(100,100) 就是在 actionBar 的正下面

• onSelected 用户选中的回调

• onCanceled 用户取消的回调

• 配合 actionBar 的写法：

class _MyHomePageState extends State<MyHomePage> {
  var items = <String>["AA", "BB", "CC", "DD", "FF"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          PopupMenuButton<String>(
            itemBuilder: (BuildContext context) {
              return _getItemBuilder2();
            },
            icon: Icon(Icons.access_alarm),
            onSelected: (value) {
              print(value);
            },
            onCanceled: () {},
            offset: Offset(200, 100),
          )
        ],
      ),
      body: Center(
        child: TestWidget(),
      ),
    );
  }
}
复制代码

• 常规生成 item 的写法：

List<PopupMenuEntry<String>> _getItemBuilder() {
    return items
        .map((item) => PopupMenuItem<String>(
              child: Text(item),
              value: item,
            ))
        .toList();
  }
复制代码

• 加上分割线，带 icon 的 item

List<PopupMenuEntry<String>> _getItemBuilder2() {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: "1",
        child: ListTile(
          leading: Icon(Icons.share),
          title: Text('分享'),
        ),
      ),
      PopupMenuDivider(), //分割线
      PopupMenuItem<String>(
        value: "2",
        child: ListTile(
          leading: Icon(Icons.settings),
          title: Text('设置'),
        ),
      ),
    ];
  }
复制代码

除了 actionBar 以外，其余地方也能够用啊， 置于显示位置，你要知道 item 的宽度，+- 表明左右方向，在下方按钮显示，Y 坐标写 100 就行