按钮

漂浮形态的按钮

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(
  child: Text("normal"),
  onPressed: () {},
);

FlatButton的定义

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

自定义按钮样式:

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(
  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: () {},
);

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

Design by Quanzaiyu | Power by VuePress