Flutter 中的按钮组件，RaisedButton，FlatButton，OutlineButton，IconButton，ButtonBar

最新推荐文章于 2023-11-29 19:15:40 发布
最新推荐文章于 2023-11-29 19:15:40 发布
阅读量555 收藏 3
点赞数 3
分类专栏： Flutter 文章标签： flutter html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35427437/article/details/109930800
版权

Flutter 按钮组件

Flutter里面有很多的Button组件很多，常见的按钮组件有：RaisedButton，FlatButton，IconButton，OutlineButton，ButtonBar，FloationActionButton等..

组件描述
RaisedButton凸起的按钮，其实就是Material Design风格的Button
FlatButton篇平化的按钮
OutlineButton线框按钮
IconButton图标按钮
ButtonBar按钮组件
FloatingActionButton浮动按钮

Flutter 按钮组件中的一些通用属性

属性名称值类型属性值
onPressedVoidCallback，一般接收一个方法必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示禁用相关样式
childWidget文本控件
textColorColor文本颜色
colorColor按钮的颜色
disabledColorColor按钮禁用时的颜色
disabledTextColorColor按钮禁用时的文本颜色
splashColorColor点击按钮时水波纹的颜色
elevationdouble阴影的范围，值越大阴影范围越大
padding内边距
shape

设置按钮的形状

shape: RoundedRectangleBorder(

          borderRadius:BorderRadius.circular(10),

)

shape: CircleBorder(

      side: BorderSide(

           color:Colors.white,

       )

)

普通按钮

coding

import 'package:flutter/material.dart';
import 'package:flutterappbarapp/page/SearchPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      body: ButtonTest(),
    );
  }
}

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                child: Text("普通按钮"),
                onPressed: (){//点击事件
                  print("普通按钮");
                },
              ),
              SizedBox(width: 30,),
              RaisedButton(
                child: Text("有颜色按钮"),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: (){
                  print("有颜色按钮");
                },
              ),
              SizedBox(width: 30,),
              RaisedButton(
                child: Text("有阴影按钮"),
                color: Colors.blue,//设置背景颜色
                textColor: Colors.white,
                elevation: 20,//设置阴影
                onPressed: (){
                  print("有阴影按钮");
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

设置宽高按钮，自适应按钮

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutterappbarapp/page/SearchPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
      ),
      body: ButtonTest(),
    );
  }
}

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 200,
                height: 40,
                child: RaisedButton(
                  child: Text("设置宽高按钮"),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 10,
                  onPressed: (){
                    print("设置宽高按钮");
                  },
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: Container(
                  height: 40,
                  margin: EdgeInsets.all(20),
                  child: RaisedButton(
                    child: Text("自适应按钮"),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: (){
                      print("自适应按钮");
                    },
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

图片按钮

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutterappbarapp/page/SearchPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Drawer',
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
      ),
      body: ButtonTest(),
    );
  }
}

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton.icon(
                  onPressed: (){
                    print("RaisedButton 图标按钮");
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                  icon: Icon(Icons.search),
                  label: Text("图标按钮"),
                  shape: RoundedRectangleBorder(//设置按钮的形状
                    borderRadius: BorderRadius.circular(10)
                  ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

圆形按钮

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 100,
                height: 100,
                child:RaisedButton(
                  child: Text("圆形按钮"),
                  onPressed: (){
                    print("RaisedButton 图标按钮");
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  shape: CircleBorder(
                    side: BorderSide(
                        color: Colors.white
                    ),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

FlatButton 篇平化的按钮

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                child: Text("篇平化按钮"),
                onPressed: (){
                  print("篇平化按钮");
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

OutlineButton线框按钮

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              OutlineButton(
                child: Text("线框按钮"),
                color: Colors.blue,
                textColor: Colors.yellow,
                onPressed: (){
                  print("线框按钮");
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

IconButton图片按钮

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: Icon(Icons.settings),
                onPressed: (){
                  print("IconButton");
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

ButtonBar 按钮组件

class ButtonTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ButtonBar(
                children: [
                  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("点击注册");
                    },
                  ),
                ],
              )
            ],
          ),
        ],
      ),
    );
  }
}

Flutter FloatingActionButton介绍  通过FloatingActionButton实现闲鱼app底部凸起按钮

通过FloatingActionButton实现闲鱼底部凸起按钮

https://liwangjiang.blog.csdn.net/article/details/110008345

达帮主
关注
专栏目录
Flutter PopupMenuButton下拉菜单
xiangzhihong8的专栏
10-30 822
下拉菜单是移动应用交互中一种常见的交互方式，可以使用下拉列表来展示多个内容标签，实现页面引导的作用。在Flutter开发中，实现下拉弹框主要有两种方式，一种是继承Dialog组件使用自定义布局的方式实现，另一种则是使用官方的PopupMenuButton组件进行实现。使用PopupMenuButton组件实现下拉弹框时，需要传入itemBuilder、child和一些必要的属性即可，代码如下。如果没有特殊的展示要求，使用官方提供的PopupMenuButton组件即可实现下拉菜单效果，如下图所示。
【Flutter】Flutter 使用 dropdown_button2 实现自定义下拉菜单
Code Metaverse
09-05 1747
`dropdown_button2`是一个功能强大且易于使用的Flutter包。它不仅提供了原生`DropdownButton`没有的高级特性，还保持了与原生组件相似的API，使得迁移变得非常简单。
Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）
热门推荐
喻志强的博客
12-17 8万+
Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下 RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton FlatButton ：扁平化的按钮，继承自MaterialButton OutlineButton ：带边框的按钮，继承自MaterialButton IconB...
Flutter中常用的按钮组件-RaisedButton（凸起的按钮）
不二菜菜子的博客
01-31 1081
Flutter中常用的按钮组件-RaisedButton（凸起的按钮）
flutter之RaisedButton
青年码农
08-17 718
1RaisedButtonRaisedButton组件主要用于文本布局。2构造函数const RaisedButton({ Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextThem...
RaisedButton、FlatButton、OutlineButton、IconButton、ButtonBar
06-05
此资源介绍的相关内容有：按钮组件 RaisedButton、FlatButton、OutlineButton、IconButton、ButtonBar以及自定义按钮组件 FloatingActionButton实现类似闲鱼App底部导航凸起按钮。 适合新手学习移动端开发，也适合老...
Flutter中的按钮组件
蓝枫
02-08 586
Flutter中常见的按钮组件 RaiseButton：凸起的按钮，Material Design风格的按钮 FlatButton：扁平化按钮 OutlineButton:线框按钮 IconButton：图标按钮 ButtonBar：按钮组 FloatingActionButton：浮动按钮 main.dart //导入了Material UI组件库 ,快捷操作fim im...
Flutter中的按钮组件Button
越陌度阡
12-28 4495
Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下： 1.RaisedButton ：凸起的按钮； 2.FlatButton ：扁平化的按钮； 3. OutlineButton：线框按钮； 4. IconButton ：图标按钮； 5. ButtonBar：按钮组； 6. FloatingActionButton：浮动按钮； 按钮组件常见的属性： 1.onPressed按下按钮时触发的回调方法，为必填参数，如果值为null 表示禁用按钮，.......
2021年Flutter中的按钮组件Button
码蝗的博客
03-24 1647
Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下： 1.RaisedButton 凸起的按钮； 2.FlatButton 扁平化的按钮； 3. OutlineButton 线框按钮； 4. IconButton 图标按钮； 5. ButtonBar 按钮组； 6. FloatingActionButton 浮动按钮； 按钮组件常见的属性： 1.onPressed按下按钮时触发的回调方法，为必填参数，如果值为null 表示禁用按钮，会显示...
Flutter之按钮组件
一花一世界 一叶一菩提
03-04 400
1、常用按钮 常用按钮 介绍 RaisedButton 凸起的按钮，其实就是 Material Design 风格的 Button FlatButton 扁平化的按钮 OutlineButton 线框按钮 IconButton ...
Android Raised Button
yao伟斌
03-15 2573
Android Raised Button 前言 如何添加 设置style 参考 谢谢前言知道了Google发布的Material Design之后，如何在代码中使用Raised Button？如何添加 在 build.gradle 中添加 appcompat 的库： dependencies { compile 'com.android.su
Flutter - 按钮
c_liufeng的博客
12-09 2091
普通按钮 TextButton - 文本按钮 OutlineButton - 空心按钮 ElevatedButton - 凸起按钮 按钮属性 属性 类型 说明 onPressed Function 点击事件 onLongPress Function 长按事件 child Widget 子组件 style ButtonStyle 自定义样式 ButtonStyle 属性 属性 类型 说明 textStyle MaterialStateProperty 字体样
flutter下拉筛选组件_flutter学习笔记-flutter组件基础
weixin_39942397的博客
11-30 1292
整理自：用flutter快速构建原生应用4.1 Image图片组件的应用4.1.1 图片资源的加载通过资源加载的方法加载图片，需要在pubspec.yaml文件的flutter标签下添加配置项配置资源路径。如：flutter: assets: -src/iconimg.jpeg //使用 Image.asset('src/iconimg.jpeg')通过文件来进行图片资源的加载，如：...
Flutter组件之按钮（RaisedButton）
斌
06-24 4845
凸起按钮组件（RaisedButton）是Material Design中的button，一个凸起的材质矩形按钮，它可以响应按下事件，并且按下时会带一个触摸的效果。 常用属性如下： 属性名 类型 默认值 说明 color Color null ...
Flutter下拉框使用和可替换按钮的组件
最新发布
Gxy_w的博客
11-29 1757
1、下拉框在使用flutter框架完成项目的时候，有一个下拉框选择排序条件的需求，需要将下拉的选择内容，放在下拉按钮的下面，如Unity的Dropdown。下图是完整的需求。但是flutter系统自带的DropdownButtonFormField，他的选择内容面板是不固定的，并不在下面，研究了一下，因为时间比较紧，就直接使用别人已经封装好的插件DropdownButtonFormField2。这个插件符合需求标准2、替代按钮。
raisedbutton shape
weixin_30726161的博客
06-14 173
RaisedButton( child:Text('delete'), clipBehavior: Clip.antiAliasWithSaveLayer, color: Colors.orangeAccent, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)), onPres...
Flutter 控件大全 RaisedButton
weixin_38107457的博客
05-18 862
RaisedButton是一个material风格”凸起“的按钮，基本用法： RaisedButton( child: Text('Button'), onPressed: (){ }, ) 为null或不设置时，按钮是禁用状态。 onHighlightChanged 为高亮变化回调，按下时处于高亮状态，抬起处于不高亮状态，用法如下： RaisedButton( onHighlightChanged: (high){ }, ... ) 以textColor.
vue中事件监听v-on的基本使用
nanzai11111的博客
10-08 679
v-on参数 当通过methods中定义方法，以供@click调用，需要注意参数问题， 情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加。（） <!-- 1、 事件调用的方法没有参数--> <button @click="btnClick">按钮1</button> <button @click="btnClick()">按钮2</button> <!-- 2、 在事件定义时,方法本身需要一个参数，正常的写法应该是下面这样
Flutter中常用的按钮组件-FlatButton(扁平化的按钮)
不二菜菜子的博客
01-31 1079
Flutter中常用的按钮组件-FlatButton(扁平化的按钮)
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

达帮主

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值