按钮

漂浮形态的按钮

RaisedButton 创建一个凸起的材质矩形按钮 (Material Design风格)

RaisedButton(
  child: Text("normal"),
  onPressed: () {},
);

自定义按钮样式:

RaisedButton(
  color: Colors.blue,
  highlightColor: Colors.blue[700], // 按钮按下时的背景颜色
  colorBrightness: Brightness.dark, // 按钮主题
  splashColor: Colors.grey, // 点击时,水波动画中水波的颜色
  child: Text("Submit"),
  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
  onPressed: () {},
);

扁平形态的按钮

FlatButton 创建一个扁平化的按钮

FlatButton(
  child: Text("normal"),
  onPressed: () {},
);

FlatButton的定义

const FlatButton({
  ...
   this.onPressed, // 按钮点击回调
   this.child, // 按钮的内容
  this.textColor, // 按钮文字颜色
  this.highlightColor, // 按钮按下时的背景颜色
  this.splashColor, // 点击时,水波动画中水波的颜色
  this.colorBrightness, // 按钮主题,默认是浅色主题
  this.enabled, // 是否可用
  this.disabledTextColor, // 按钮禁用时的文字颜色
  this.disabledColor, // 按钮禁用时的背景颜色
  this.color, // 按钮背景颜色
  this.padding, // 按钮的填充
  this.shape, // 外形
})

自定义按钮样式:

FlatButton(
  color: Colors.blue,
  highlightColor: Colors.blue[700],
  colorBrightness: Brightness.dark,
  splashColor: Colors.grey,
  child: Text("Submit"),
  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
  onPressed: () {},
);

带边框的按钮

OutlineButton 创建一个带边框的按钮

OutlineButton(
  child: Text("normal"),
  onPressed: () {},
)

带图标的按钮

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)
RaisedButton.icon(
  icon: Icon(Icons.send),
  label: Text("发送"),
  onPressed: () {},
);
FlatButton.icon(
  icon: Icon(Icons.info),
  label: Text("详情"),
  onPressed: () {},
);
OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("添加"),
  onPressed: () {},
);

下拉选择按钮

DropdownButton: 下拉选择按钮, 示例:

String dropdownValue = 'One';

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButton<String>(
        value: dropdownValue,
        onChanged: (String newValue) {
          setState(() {
            dropdownValue = newValue;
          });
        },
        items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          })
          .toList(),
      ),
    ),
  );
}

弹出选择按钮

PopupMenuButton: 弹出选择按钮, 示例:

class HomePage extends StatefulWidget {
  
  createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
            title: Text('首页'),
            actions: [
              PopupMenuButton<String>(
                icon: Icon(Icons.more_horiz),
                offset: Offset(100, 100),
                itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                  const PopupMenuItem<String>(
                    value: "1",
                    child: ListTile(
                      leading: Icon(Icons.share),
                      title: Text('分享'),
                    ),
                  ),
                  PopupMenuDivider(),//分割线
                  const PopupMenuItem<String>(
                    value: "2",
                    child: ListTile(
                      leading: Icon(Icons.settings),
                      title: Text('设置'),
                    ),
                  ),
                ],
                tooltip: "点击弹出菜单",
                onSelected: (String result) {
                  switch (result) {
                    case "1":
                      print('分享');
                      break;
                    case "2":
                      print('设置');
                      break;
                  }
                },
                onCanceled: () {
                  print("取消");
                },
              ),
            ]
        ),
        body: Container()
    );
  }
}

PopupMenuDivider 为菜单项之间的分隔符

水平排列的按钮组

ButtonBar: 水平排列的按钮组, 示例:

ButtonBar(
  alignment: MainAxisAlignment.spaceAround, // 布局方向,默认MainAxisAlignment.end
  mainAxisSize: MainAxisSize.max, // 主轴大小,默认MainAxisSize.max
  children: <Widget>[ // Button集合
    RaisedButton(child: Text('ButtonBar1', style: TextStyle(color: Colors.white),),color: Colors.blue,
      onPressed: ()=>{},),
    RaisedButton(child: Text('ButtonBar2', style: TextStyle(color: Colors.white),),color: Colors.blue,
      onPressed: ()=>{},),
    RaisedButton(child: Text('ButtonBar3', style: TextStyle(color: Colors.white),),color: Colors.blue,
      onPressed: ()=>{},),
  ],
),

InkWell

InkWell 可以创建一个包含水波效果的按钮

InkWell 可以捕获更多事件:

  • onTap
  • onDoubleTap
  • onLongPress
  • onTapCancel
  • onTapDown
  • onHighlightChanged
  • onHover

InkWell无水波纹效果的解决方案

在 InkWell 的外层再套上 Matetial 以及 Ink组件:

Material(
  child: Ink(
    child:
    InkWell(
      onTap: () {
        // ...
      },
      child: ListTile(
        // ...
      ),
    ),
  ),
)

封装

其实写按钮组件也挺费劲的, 我们可以封装一个公共按钮组件:

enum ButtonType { RaisedButton, FlatButton }
Widget CommonButton (
  title, {
    VoidCallback onPressed,
    Color bgColor: BaseStyle.mainColor, // 按钮背景色
    Color textColor, // 文字颜色
    Color splashColor: Colors.grey, // 水波颜色
    Color highlightColor: Colors.transparent, // 高亮颜色
    ButtonType type: ButtonType.RaisedButton, // 按钮类型
  }
) {
  textColor = type == ButtonType.RaisedButton ? Colors.white : BaseStyle.mainColor;
  if (type == ButtonType.RaisedButton) {
    return RaisedButton(
      color: bgColor,
      splashColor: splashColor,
      highlightColor: highlightColor,
      colorBrightness: Brightness.dark,
      child: Text(title, style: TextStyle(
          color: textColor
      )),
      onPressed: () {
        if (onPressed != null) {
          onPressed();
        }
      },
    );
  } else if (type == ButtonType.FlatButton) {
    return FlatButton(
      child: new Text(title, style: TextStyle(
          color: textColor
      )),
      onPressed: () {
        if (onPressed != null) {
          onPressed();
        }
      },
    );
  }
}

使用方式:

// RaisedButton
CommonButton('取消', onPressed: () {
  Navigator.of(context).pop('1');
}),
// FlatButton
CommonButton('取消', type: ButtonType.FlatButton, onPressed: () {
  Navigator.of(context).pop('1');
}),

其他

参考

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress