Flutter开发 -- [04 - 按钮Widget]

一. 按钮Widget

1.1. 按钮的基础

Material widget库中提供了多种按钮Widget如FloatingActionButton、RaisedButton、FlatButton、OutlineButton等

我们直接来对他们进行一个展示：

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        FloatingActionButton(
          child: Text("FloatingActionButton"),
          onPressed: () {
            print("FloatingActionButton Click");
          },
        ),
        RaisedButton(
          child: Text("RaisedButton"),
          onPressed: () {
            print("RaisedButton Click");
          },
        ),
        FlatButton(
          child: Text("FlatButton"),
          onPressed: () {
            print("FlatButton Click");
          },
        ),
        OutlineButton(
          child: Text("OutlineButton"),
          onPressed: () {
            print("OutlineButton Click");
          },
        )
      ],
    );
  }
}

1.2. 自定义样式

前面的按钮我们使用的都是默认样式，我们可以通过一些属性来改变按钮的样式

RaisedButton(
  child: Text("同意协议", style: TextStyle(color: Colors.white)),
  color: Colors.orange, // 按钮的颜色
  highlightColor: Colors.orange[700], // 按下去高亮颜色
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), // 圆角的实现
  onPressed: () {
    print("同意协议");
  },
)