FLutter2.X新按钮组件及新特性

最新推荐文章于 2023-05-08 18:18:38 发布
最新推荐文章于 2023-05-08 18:18:38 发布
阅读量1k 收藏
点赞数 1
分类专栏： Flutter 文章标签： flutter android dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46527751/article/details/122561071
版权

FLutter2.X新组件及新特性

按钮组件

Flutter1.x 中的按钮组件Flutter2.x 中的按钮组件
RaisedButton 凸起的按钮ElevatedButton 凸起的按钮
FlatButton 扁平化的按钮TextButton 扁平化的按钮
OutlineButton 线框按钮OutlinedButton 线框按钮
IconButton 图标按钮IconButton 图标按钮
ButtonBar 按钮组ButtonBar 按钮组
FloatingActionButton 浮动按钮FloatingActionButton 浮动按钮

RaisedButton的部分参数如下:

参数说明
onPressed点击事件
onLongPress长按点击事件
textColor文字颜色
child内部布局
elevation阴影大小
color按钮背景颜色
textColor文字颜色
splashColor波纹颜色
shape处理圆角、边框等样式
shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(10),)
shape:CircleBorder(side: BorderSide(color: Colors.white,))
splashColor波纹颜色

控制按钮大小可在按钮外部嵌套Container，让按钮宽度自适应屏幕大小可在外部嵌套Expanded

// ignore_for_file: prefer_typing_uninitialized_variables, sized_box_for_whitespace, use_key_in_widget_constructors, avoid_init_to_null

import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
  const ButtonDemoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("按钮演示页面"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: (){

              },
            )
          ],
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('普通按钮'),
                  onPressed: () {
                    print("普通按钮");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton(
                  child: Text('颜色按钮'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  onPressed: () {
                    print("有颜色按钮");
                  },
                ),               
              ],
            ),
            SizedBox(height: 10),
             Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
          
                RaisedButton(
                  child: Text('阴影按钮'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  onPressed: () {
                    print("有阴影按钮");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton.icon(
                    icon: Icon(Icons.search),
                    label: Text('图标按钮'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    // onPressed: null,
                    onPressed: () {
                      print("图标按钮");
                    })
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 50,
                  width:200,
                  child: RaisedButton(
                    child: Text('宽度高度'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: () {
                      print("宽度高度");
                    },
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 60,
                    margin: EdgeInsets.all(20),
                    child: RaisedButton(
                      child: Text('自适应按钮'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("自适应按钮");
                      },
                    ),
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                    child: Text('圆角按钮'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                    onPressed: () {
                      print("圆角按钮");
                    }),
                Container(
                  height: 80,
                  child: RaisedButton(
                      child: Text('圆形按钮'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      splashColor: Colors.red,
                      shape:
                          CircleBorder(side: BorderSide(color: Colors.white)),
                      onPressed: () {
                        print("圆形按钮");
                      }),
                ),
                FlatButton(
                  child: Text("按钮"),
                  color: Colors.blue,
                  textColor: Colors.yellow,
                  onPressed: () {
                    print('FlatButton');
                  },
                ),
                SizedBox(width: 10),
                OutlineButton(
                    child: Text("按钮"),
                    //  color: Colors.red,  //没有效果
                    //  textColor: Colors.yellow,
                    onPressed: () {
                      print('FlatButton');
                    })
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(20),
                    height: 50,
                    child: OutlineButton(child: Text("注册"), onPressed: () {}),
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                ButtonBar(
                  children: <Widget>[

                    RaisedButton(
                      child: Text('登录'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("宽度高度");
                      },
                    ),
                    RaisedButton(
                      child: Text('注册'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("宽度高度");
                      },
                    ),
                    MyButton(text: "自定义按钮",height: 60.0,width: 100.0,pressed: (){
                      print('自定义按钮');
                    })
                    
                  ],
                )
              ],
            )
          ],
        ));
  }
}


//自定义按钮组件

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final width;
  final height;
  const MyButton({this.text='',this.width=80,this.height=30, this.pressed}) ;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      width: width,
      child: RaisedButton(
        child: Text(text),
        onPressed:pressed ,
      ),
    );
  }
}

在这里插入图片描述

ElevatedButton的部分参数如下：

参数说明
onPressed点击事件
onLongPress长按点击事件
style按钮样式
child内部组件

RaisedButton使用了不同的参数实现样式，ElevatedButton的样式都在style中使用,使用MaterialStateProperty对各种状态进行判断并返回相应的样式组件,也可以通用一种样式组件
详细可以参考这篇文章，写的很详细

// ignore_for_file: prefer_typing_uninitialized_variables, sized_box_for_whitespace, prefer_const_constructors

import 'package:flutter/material.dart';

class ButtonExtendDemoPage extends StatelessWidget {
  const ButtonExtendDemoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter2.x按钮演示页面"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: (){

              },
            )
          ],
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton (
                  child: Text('普通按钮'),
                  onPressed: () {
                    print("普通按钮");
                  },
                ),
                SizedBox(width: 5),
                ElevatedButton(
                  child: Text('颜色按钮'),
                  style:ButtonStyle(
                      backgroundColor:MaterialStateProperty.all(Colors.red),
                      foregroundColor:MaterialStateProperty.all(Colors.white)
                  ),
                  onPressed: () {
                    print("有颜色按钮");
                  },
                ),              
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
             
                ElevatedButton(
                  child: Text('阴影按钮'),
                  style:ButtonStyle(
                      backgroundColor:MaterialStateProperty.all(Colors.yellow),
                      foregroundColor:MaterialStateProperty.all(Colors.red),
                      elevation:MaterialStateProperty.all(50)
                  ),                 
                  
                  onPressed: () {
                    print("有阴影按钮");
                  },
                ),
                SizedBox(width: 5),
                ElevatedButton.icon(
                    icon: Icon(Icons.search),
                    label: Text('图标按钮1'),                    
                    // onPressed: null,
                    onPressed: () {
                      print("图标按钮");
                    })
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 80,
                  width: 200,
                  child: ElevatedButton(
                    child: Text('宽度高度'),
                    style:ButtonStyle(
                      backgroundColor:MaterialStateProperty.all(Colors.red),
                      foregroundColor: MaterialStateProperty.all(Colors.black)
                    ) ,
                    onPressed: () {
                      print("宽度高度");
                    },
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 60,
                    margin: EdgeInsets.all(10),
                    child: ElevatedButton(
                      child: Text('自适应按钮1'),                     
                      onPressed: () {
                        print("自适应按钮");
                      },
                    ),
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                    child: Text('圆角'),
                    style: ButtonStyle(
                      backgroundColor:MaterialStateProperty.all(Colors.blue),
                      foregroundColor: MaterialStateProperty.all(Colors.white),                    
                      elevation: MaterialStateProperty.all(20),
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10))
                        ),
                   ),
                    onPressed: () {
                      print("圆角按钮");
                    }),
                Container(
                  height: 80,
                  child: ElevatedButton(
                      child: Text('圆形按钮'),
                   
                      style: ButtonStyle(
                          backgroundColor:MaterialStateProperty.all(Colors.blue),
                          foregroundColor: MaterialStateProperty.all(Colors.white),                    
                          elevation: MaterialStateProperty.all(20),
                          shape: MaterialStateProperty.all(CircleBorder(side: BorderSide(color: Colors.white)),
                      )),
                      onPressed: () {
                        print("圆形按钮");
                      }),
                ),
                TextButton (
                  child: Text("按钮"),                 
                  onPressed: () {
                    print('FlatButton');
                  },
                ),
                SizedBox(width: 10),
                OutlinedButton(
                    child: Text("OutlinedButton"),                    
                    onPressed: () {
                      print('FlatButton');
                    })
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(20),
                    height: 50,
                    child: OutlinedButton(
                      child: Text("注册 配置边框"),
                      style: ButtonStyle(
                        foregroundColor: MaterialStateProperty.all(Colors.black),
                        side: MaterialStateProperty.all(BorderSide(width:1,color: Colors.red))
                      ),
                       onPressed: () {}
                    ),
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                ButtonBar(
                  children: <Widget>[

                    ElevatedButton(
                      child: Text('登录'),                  
                      onPressed: () {
                        print("宽度高度");
                      },
                    ),
                    ElevatedButton(
                      child: Text('注册'),                     
                      onPressed: () {
                        print("宽度高度");
                      },
                    ),
                    MyButton(text: "自定义按钮",height: 60.0,width: 100.0,pressed: (){
                      print('自定义按钮');
                    })
                    
                  ],
                )
              ],
            )
          ],
        ));
  }
}


//自定义按钮组件

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final width;
  final height;
  const MyButton({this.text='',this.pressed,this.width=80,this.height=30}) ;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      width: width,
      child: ElevatedButton(
        child: Text(text),
        onPressed:pressed ,
      ),
    );
  }
}

在这里插入图片描述

空安全

2021 年 5 月 19 日 Flutter 官方发布了 Flutter2.2.0 的版本，Flutter2.2.0 中迁移了 Dart 的核心库,以完全使用 null safety。
null safety： https://flutter.cn/docs/null-safety
如果您使用的是 Flutter2.2.0 之后的版本，需要注意 null safety。

创建组件的变化

以前创建的 StatefulWidget 格式如下 ：

class PayPage extends StatefulWidget {
PayPage({Key key}) : super(key: key); _PayPageState createState() => _PayPageState();
}

现在创建 StatefulWidget 的时候需要注意把 Key 配置成可空参数 格式如下：

class PayPage extends StatefulWidget {
PayPage({Key? key}) : super(key: key); _PayPageState createState() => _PayPageState();
}
配置路由的变化

1、需要指定路由的类型 final Map<String,Function> routes

final Map<String,Function> routes={
'/':(context)=>Tabs(),
'/buttonPage':(context)=>ButtonDemoPage(),
'/buttonExtend':(context)=>ButtonExtendDemoPage(),
'/textField':(context)=>TextFieldDemoPage(),
'/checkBox':(context)=>CheckBoxDemo(),
'/radio':(context)=>RadioDemo(), };

2、配置 onGenerateRoute 的时候注意可空类型

var onGenerateRoute=(RouteSettings settings) {
     final String? name = settings.name;
     final Function? pageContentBuilder = routes[name];
     if (pageContentBuilder != null) {
          if (settings.arguments != null) {
           final Route route = MaterialPageRoute(
                builder: (context) =>
                   pageContentBuilder(context, arguments: settings.arguments));
                       return route;
           }else{
           final Route route = MaterialPageRoute(
           builder: (context) =>pageContentBuilder(context));
                      return route;
           }
     }
};
s－010101
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅识Flutter 基本组件之按钮组件 Raisebutton\ FlatButton\ OutlineButton按钮
qq_43336158的博客
04-01 2158
按钮组件是应用程序中用于交互的最常用的组件之一, MaterialWidget库中提供了多种按钮Widget,如 RaisedButton(凸起按钮组件)、FlatButton(扁平按钮组件）和OutlineButton(带边框按钮组件)等，它们都是直接或间接对RawMaterialButton的包装定制,从而形成不同的外观样式，所以它们的属性和使用方法基本一样.
Flutter开发之——基本组件-Button
最新发布
2401_84132479的博客
04-17 1294
Android架构学习进阶是一条漫长而艰苦的道路，不能靠一时激情，更不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！上面分享的字节跳动公司2021年的面试真题解析大全，笔者还把一线互联网企业主流面试技术要点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。【Android高级架构视频学习资源】Android部分精讲视频领取学习后更加是如虎添翼！进军BATJ大厂等（备战）！
Flutter-Button的使用说明
lvsonghai的博客
02-11 2286
Flutter-Button的使用说明 1、几种Button 在flutter中，一共有七种类型的button；分别是一下几种： 1、a filled button whose material elevates when pressed. 2、FlatButton, a material design button without a shadow. 3、DropdownButton, a bu...
Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）
热门推荐
喻志强的博客
12-17 8万+
Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下 RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton FlatButton ：扁平化的按钮，继承自MaterialButton OutlineButton ：带边框的按钮，继承自MaterialButton IconB...
Flutter之ElevatedButton详解
江上清风山间明月的博客
05-08 4360
这个按钮有蓝色填充色和白色文字,设置了10像素高度的阴影,并且在点击时打印“Pressed”
Flutter 按钮 大集合
会煮咖啡的猫咪
11-02 741
Flutter 按钮 大集合 😵😵 大家好今天集中介绍下 Flutter 自带的几个按钮。 原文 https://medium.com/@kaushikidum29/flutter-buttons-4ac64d70f0b2 前言 按钮是用户触发事件的控件，比如采取行动、做出选择、搜索等等。它们可以放在我们 UI 的任何地方，比如对话框、表单、卡片、工具栏等等。 正文 Flutter 按钮的特点 在 Flutter 中按钮的标准特性如下: 我们可以很容易地将主题应用于按钮、形状、颜色、动画和行为。我
flutter2.x从入门/实战视频教程
11-29
包含23个视频, 每个视频2小时左右, 主要讲解了: 1.flutter环境搭建; 2. flutter基础语法 3.flutter实战应用
基于Flutter 3.x 实战跨平台仿抖音App混合开发
09-16
分享课程——基于Flutter 3.x 实战跨平台仿抖音App混合开发，完整版视频课程下载。 Flutter 3已发布，跨平台支持性更好。本课程会手把手教你用简单、高效且通用的方式，将原生项目迁移成一个Flutter/原生混合开发的...
flutter 3.X Http请求
03-16
flutter 3.X Http请求
flutter 3.X 二维码扫描
03-16
flutter 3.X 二维码扫描
flatbutton(扁平按钮) pb12.5
10-28
1，原型为来自互联网上的pb9版的flatbutton。 2，升级pb12.5，解决“在sle等控件中录入值后，flatbutton原形毕露”的现象 3，相关api仍采用pbvm90.dll中的函数。 欢迎交流
【Flutter】【widget】ElevatedButton,TextButton,CupertinoButton
自动人生博客
09-20 323
导入包到项目中去。
iOS flutter学习之路 day17
qq_25813441的博客
11-01 205
都是一些基础内容，可以做一个简单的了解，以后多接触，自然就熟悉了 3.2 按钮 Material 组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们都是直接或间接对RawMaterialButton组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观，而按钮的外观大都可以通过属性来自定义，我们在后面统一介绍这些属性。另外，所有 Material 库中的按钮都有如下相同点： 按下
flutter基础十：按钮Button，自定义代码片断,ListView
煮酒Shae
10-03 738
文章目录VS Code：自定义代码片断 VS Code：自定义代码片断 之前我们安装过代码片段，可用快速的输入一些内容。那么我们也可以自定义代码片段。
【Flutter】关于Button 的那些知识ElevatedButton等，以及Buttonstyle
自动人生博客
01-13 2868
按键，在flutter 中，有很多已经内置的button，合理的利用可以快速的开发，但是ElevatedButton中，有一个Buttonstyle，配合起来可以创建自己需要的按钮样式，但是其实个人感觉运用起来有些复杂。欢迎关注，留言，咨询，交流！
Flutter基础-FlatButton
AdrianAndroid的专栏
06-24 1502
#Sample FlatButton( color: Colors.blue, textColor: Colors.white, disabledColor: Colors.grey, disabledTextColor: Colors.black, padding: EdgeInsets.all(8.0), splashColor: Colors.blueAccent, ...
Flutter - Button样式及参数
a136447572的专栏
12-07 3384
Material 组件库中提供了多种按钮组件如`ElevatedButton`、`TextButton`、`OutlineButton`等，它们都是集成于 ButtonStyleButton
基于 flutter 3.x 仿抖音跨平台混合开发
07-28
Flutter提供了丰富的UI组件，如按钮、文本、图片、视频播放等，可以用于构建抖音的各种界面元素。开发者可以使用Dart语言来编写业务逻辑，同时可以使用Flutter提供的hot reload功能实时预览和调试应用程序。 为了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值