Flutter-按钮Widget

最新推荐文章于 2024-09-19 10:42:46 发布

grant_cloud

最新推荐文章于 2024-09-19 10:42:46 发布

阅读量218

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/Alangao420983/article/details/119034608

版权

flutter 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1，Flutter中有几种按钮的样式，按钮Widget如FloatingActionButton、RaisedButton、FlatButton、OutlineButton等，直接贴代码看一下

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

可以直接运行的看看效果：
在这里插入图片描述
2，上面展示的一些按钮都是系统自带的默认样式，在开发中很多都是自定义的样式
字体的颜色，背景，按下的高亮，圆角等。

RaisedButton(
          child: Text("登录",style: TextStyle(color: Colors.white)),
          color: Colors.blue,//按钮背景颜色
          highlightColor: Colors.blue[600],//按下改变颜色
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),//圆角
          onPressed: () {
            print("登录 点击");
          },
        )

其他的各种样式可以自行尝试。