flutter 圆形样式 按钮

Flutter 圆形/圆角头像

圆形头像

① ClipOval

Container(
  padding: EdgeInsets.fromLTRB(20, 0, 20, 80),
  margin: EdgeInsets.all(0),
  alignment: Alignment.bottomCenter,
  height: 250,
  width: 430,
  color: Colors.blue,
  child: ClipOval(
    child: Image.network(
      'https://cdn.nlark.com/yuque/0/2018/png/164272/1540470801359-2440731a-e0c0-4608-8dfc-c48bb2bc8cea.png?x-oss-process=image/resize,m_fill,w_192,h_192/format,png',
      height: 80, 
      fit: BoxFit.cover,
          ),
      ),
  ),

圆角矩形

① ClipRRect(圆角矩形)

new ClipRRect(
    borderRadius: BorderRadius.circular(6.0),
    child: new Image.asset(Utils.getImgPath('ali_connors')),
  )

② BoxDecoration BoxShape.rectangle

new Container(
    width: 88.0,
    height: 88.0,
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(6.0),
      image: DecorationImage(
        image: AssetImage(
          Utils.getImgPath('ali_connors'),
        ),
      ),
    ),

按钮

https://www.jianshu.com/p/2f887cadd527
在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。
一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

MaterialButton 是一个 Materia 风格的按钮。

new MaterialButton(
    color: Colors.blue,
    textColor: Colors.white,
    child: new Text('点我'),
    onPressed: () {
        // ...
    },
)

一般来说，如果需要点击事件，就要嵌套一个 Button，因为 Container、Text 等组件都没有点击事件。

RaisedButton

RaisedButton 与 MaterialButton 类似。

new RaisedButton(
    child: new Text('点我'),
    onPressed: () {},
)

FlatButton

FlatButton 与 MaterialButton 类似，不同的是它是透明背景的。如果一个 Container 想要点击事件时，可以使用 FlatButton 包裹，而不是 MaterialButton。因为 MaterialButton 默认带背景，而 FlatButton 默认不带背景。

new FlatButton(
    child: new Text('点我'),
    onPressed: () {},
)

IconButton

IconButton 顾名思义就是 Icon + Button 的复合体，当某个 Icon 需要点击事件时，使用 IconButton 最好不过。

new IconButton(
    icon: new Icon(Icons.volume_up),
    tooltip: 'Increase volume by 10%',
    onPressed: () {
        // ...
    },
)

其外，还有已经定义好的 Icon Button：CloseButton、BackButton。他们都有导航返回的能力。

FloatingActionButton

FloatingActionButton 是一个浮动在页面右下角的浮动按钮。

new Scaffold(
    // ...
    floatingActionButton: new FloatingActionButton(
        onPressed: () {},
        child: new Icon(Icons.add_a_photo),
        elevation: 3.0,
        highlightElevation: 2.0,
        backgroundColor: Colors.red,        // 红色
    ),
)

在 Scaffold 里使用的时候，它是一个浮动状态的按钮，在其他地方使用，就不会浮动了。

ButtonBar

ButtonBar 是一个布局组件，可以让 Button 排列在一行。

new ButtonBar(
    children: <Widget>[
        new CloseButton(),
        new BackButton(),
    ],
)

作者：iwakevin
链接：https://www.jianshu.com/p/2f887cadd527
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。