Flutte PopupMenuButton(弹出菜单) Card (卡片布局)

card 效果
Flutte PopupMenuButton(弹出菜单) Card (卡片布局)_第1张图片

new Card(
      elevation: 10.0, //高度 显示出立体感 立体阴影
      shape: new Border.all(
          color: Colors.red, width: 3.0, style: BorderStyle.solid), //图形边框
//      margin: const EdgeInsets.all(30.0),
      margin:
          new EdgeInsetsDirectional.only(bottom: 30.0, top: 10.0, start: 30.0),  //边距
      color: Colors.white,
      child: new Center(//card里面的子控件
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
//          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Icon(
              choice.icon,
              size: 128.0,
              color: textStyle.color,
            ),
            new Text(choice.title),
          ],
        ),
      ),
    );

弹出式菜单
Flutte PopupMenuButton(弹出菜单) Card (卡片布局)_第2张图片

 new PopupMenuButton(
              onSelected: _select,//Called when the user selects a value from the popup menu created by this button..
              itemBuilder: (BuildContext context) {
                return choices.skip(2).map((Choice choice) {
                  return new PopupMenuItem(
                      child: new Text(choice.title), value: choice);
                }).toList();
              },
            ),

运行效果
Flutte PopupMenuButton(弹出菜单) Card (卡片布局)_第3张图片
详细代码

你可能感兴趣的:(Flutter控件学习)