Flutter开发（十九）—— 按钮

最新推荐文章于 2024-06-15 10:21:47 发布
最新推荐文章于 2024-06-15 10:21:47 发布
阅读量466 收藏 1
点赞数
分类专栏： Android应用相关 Flutter Flutter开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RedKeyer/article/details/89918470
版权

按钮组件：
1、FloatingActionButton

main.dart 设定默认路由，Theme主题配置：

import 'package:flutter/material.dart';
import 'MaterialComponents.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      initialRoute: '/',
      // routes:
      routes: {
        '/': (context) => MaterialComponents(),
      },
    );
  }
}

MaterialComponents.dart 使用ListView组件，展示即将要演示的按钮组件的页面列表：

import 'package:flutter/material.dart';
import 'demo/FloatingButtonDemo.dart';
import 'demo/buttonDemo.dart';
import 'demo/popupMenuButtonDemo.dart';
import 'demo/PopupTitleBar.dart';

class MaterialComponents extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('data'),
        elevation: 0.0, 
      ),
      body: ListView(
        //ListView 增加padding
        padding: EdgeInsets.all(30.0),
        children: <Widget>[
          // FloatingButton 悬浮按钮
          ListItem(title: 'FloatingButton', page: FloatingButtonDemo()),
          // PopupMenuButton 弹出列表
          ListItem(title: 'PopupMenuButton', page: PopupMenuButtonDemo()),
          // TitleBar 弹出列表
          ListItem(title: 'PopupTitleBar', page: PopupTitleBarDemo()),
          buttonDemo().getFlatButtonText(),//引入 只带文字 FlatButton
          buttonDemo().getFlatButtonIcon(),//引入 只带Icon FlatButton
          buttonDemo().getRaisedButtonText(),
          buttonDemo().getRaisedButtonIcon(),
          buttonDemo().getOutlineButtonText(),
          buttonDemo().getOutlineButtonIcon(),
          buttonDemo().getRowButton(),
          buttonDemo().getButtonBar(context),
          
        ],
      ),
    );
  }
}

class ListItem extends StatelessWidget {
  final String title;
  final Widget page;
  ListItem({this.title, this.page});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      onTap: () {
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => page));
      },
    );
  }
}

一、FloatingButtonDemo.dart 漂浮动作按钮，演示代码：

import 'package:flutter/material.dart';
import 'showSnackbar.dart';

class FloatingButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: getScaffoldkey(), // 获取Scaffoldkey
      appBar: AppBar(
        title: Text('FloatingButton'),
        elevation: 0.0,
      ),
      floatingActionButton: _floatingActionButton(context),
      // floatingActionButtonLocation调整位置，centerDocked居中且重叠
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      // 添加 BottomAppBar
      bottomNavigationBar: BottomAppBar(
        color: Colors.purple,
        child: Container(
          height: 60.0, //设置BottomAppBar的高度
        ),
        //Circular Notched Rectangle 圆形缺口组件
        shape: CircularNotchedRectangle(),
      ),
    );
  }

  //构建 FloatingActionButton
  Widget _floatingActionButton(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        showSnackbar('点击了FloatingActionButton'); //展示 Snackbar
      }, //点击后处理的事件
      child: Icon(Icons.add),
      elevation: 0.0,
      backgroundColor: Colors.blueAccent, //设置背景颜色
      //设置按钮形状,默认是圆形。BeveledRectangleBorder 斜角矩形
      shape: BeveledRectangleBorder(
        borderRadius: BorderRadius.circular(15.0), //设置0.0是正方形
      ),
    );
  }
}

演示效果：

在这里插入图片描述

二、popupMenuButtonDemo.dart

import 'package:flutter/material.dart';
import 'showSnackbar.dart';

class PopupMenuButtonDemo extends StatefulWidget {
  @override
  _PopupMenuButtonDemoState createState() => _PopupMenuButtonDemoState();
}

class _PopupMenuButtonDemoState extends State<PopupMenuButtonDemo> {
  String _currentMenuitem = '东';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: getScaffoldkey(),
      appBar: AppBar(
        title: Text('PopupMenuButton'),
        elevation: 10.0,
      ),
      body: Container(
        padding: EdgeInsets.all(15.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _currentMenuitem,
              style: TextStyle(color: Colors.red, fontSize: 30.0),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                PopupMenuButton(
                    onSelected: (String value) {
                      showSnackbar('$value');
                      setState(() {
                        _currentMenuitem = value;
                      });
                    },
                    itemBuilder: (BuildContext context) =>
                        <PopupMenuItem<String>>[
                          PopupMenuItem(
                            value: '选中—东',
                            child: Text('东'),
                          ),
                          PopupMenuItem(
                            value: '选中—南',
                            child: Text('南'),
                          ),
                          PopupMenuItem(
                            value: '选中—西',
                            child: Text('西'),
                          ),
                          PopupMenuItem(
                            value: '选中—北',
                            child: Text('北'),
                          ),
                        ])
              ],
            )
          ],
        ),
      ),
    );
  }
}

演示效果：
在这里插入图片描述

三、PopupTitleBar.dart

import 'package:flutter/material.dart';
import 'showSnackbar.dart';

class PopupTitleBarDemo extends StatefulWidget {
  @override
  _PopupTitleBarDemoState createState() => new _PopupTitleBarDemoState();
}

class _PopupTitleBarDemoState extends State<PopupTitleBarDemo> {
  String _bodyStr = "显示菜单内容";
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: getScaffoldkey(),
      appBar: new AppBar(
        title: new Text("PopupTitleBar"),
        actions: <Widget>[
          new PopupMenuButton(
              onSelected: (String value) {
                setState(() {
                  _bodyStr = value;
                  showSnackbar(value);
                });
              },
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                    new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
                    new PopupMenuItem(value: "选项二的内容", child: new Text("选项二"))
                  ])
        ],
      ),
      body: new Center(
        child: new Text(_bodyStr),
      ),
    );
  }
}

演示效果：
在这里插入图片描述

四、buttonDemo.dart 中介绍了以下Button组件。
FlatButton（带或不带Icon）、RaisedButton（带或不带Icon）、OutlineButton（带或不带Icon），Row与Button组合、ButtonBar

import 'package:flutter/material.dart';

class buttonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }

//--------------FlatButton----------------------
  // FlatButton 组件
  Widget _flatButtonText = FlatButton(
    child: Text('FlatButton'), //按钮文字
    textColor: Colors.purple, //按钮文字颜色
    onPressed: () {}, //按钮点击事件
    splashColor: Colors.grey, //点击时溅墨效果颜色
  );

  Widget getFlatButtonText() {
    return _flatButtonText;
  }

  // FlatButton 组件带Icon
  Widget _flatButtonIcon = FlatButton.icon(
    icon: Icon(Icons.add_a_photo), //按钮图标
    label: Text('FlatButtonIcon'), //按钮文字
    onPressed: () {},
    splashColor: Colors.blueAccent,
    textColor: Colors.blueAccent,
  );

  Widget getFlatButtonIcon() {
    return _flatButtonIcon;
  }

  //---------------RaisedButton---------------------

  // RaisedButton 组件
  Widget _raisedButtonText = RaisedButton(
    child: Text('RaisedButton'), //按钮文字
    textColor: Colors.purple, //按钮文字颜色
    onPressed: () {}, //按钮点击事件
    splashColor: Colors.grey, //点击时溅墨效果颜色
    elevation: 5.0,
    shape: StadiumBorder(), //Stadium Border翻译体育场边界,所以像跑道
  );

  Widget getRaisedButtonText() {
    return _raisedButtonText;
  }

  // RaisedButton 组件带Icon
  Widget _raisedButtonIcon = RaisedButton.icon(
    icon: Icon(Icons.add_a_photo), //按钮图标
    label: Text('RaisedButtonIcon'), //按钮文字
    onPressed: () {},
    splashColor: Colors.blueAccent,
    textColor: Colors.blueAccent,
    elevation: 1.0,
    //倒角，像菱形
    shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(60.0)),
  );

  Widget getRaisedButtonIcon() {
    return _raisedButtonIcon;
  }

  //---------------OutlineButton---------------------

  // OutlineButton 组件 描边按钮
  Widget _outlineButtonText = OutlineButton(
    child: Text('RaisedButton'), //按钮文字
    textColor: Colors.purple, //按钮文字颜色
    onPressed: () {}, //按钮点击事件
    splashColor: Colors.grey, //点击时溅墨效果颜色
    shape: StadiumBorder(), //Stadium Border翻译体育场边界,所以像跑道
    //设置 描边颜色
    borderSide: BorderSide(color: Colors.black),
    highlightedBorderColor: Colors.red, //点击时，边框变色
  );

  Widget getOutlineButtonText() {
    return _outlineButtonText;
  }

  // OutlineButton 组件带Icon
  Widget _outlineButtonIcon = OutlineButton.icon(
    icon: Icon(Icons.add_a_photo), //按钮图标
    label: Text('RaisedButtonIcon'), //按钮文字
    onPressed: () {},
    splashColor: Colors.blueAccent,
    textColor: Colors.blueAccent,
    //倒角，像菱形
    shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(60.0)),
    //设置 描边颜色
    borderSide: BorderSide(
      color: Colors.deepPurple,
    ),
  );

  Widget getOutlineButtonIcon() {
    return _outlineButtonIcon;
  }

  //---------------Row---------------------
  // Expanded 与 Row 配合使用，会让Button 等分占用所有空间
  Widget _rowButton = Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      //Expanded 包裹OutlineButton 可以自适应，占完剩余空间
      Expanded(
        child: OutlineButton(
          child: Text('Button'),
          onPressed: () {},
          splashColor: Colors.deepPurple,
          borderSide: BorderSide(
            color: Colors.black,
          ),
          textColor: Colors.black,
          highlightedBorderColor: Colors.grey,
        ),
      ),
      SizedBox(
        width: 25.0,
      ),
      Container(
        width: 150.0, //Container 包裹OutlineButton 可以指定尺寸
        child: OutlineButton(
          child: Text('Button'),
          onPressed: () {},
          splashColor: Colors.deepPurple,
          shape: StadiumBorder(),
          borderSide: BorderSide(
            color: Colors.black,
          ),
          textColor: Colors.black,
          highlightedBorderColor: Colors.grey,
        ),
      ),
      SizedBox(
        width: 25.0,
      ),
      Expanded(
        child: OutlineButton(
          child: Text('Button'),
          onPressed: () {},
          splashColor: Colors.deepPurple,
          borderSide: BorderSide(
            color: Colors.black,
          ),
          textColor: Colors.black,
          highlightedBorderColor: Colors.grey,
        ),
      ),
    ],
  );

  Widget getRowButton() {
    return _rowButton;
  }

  //---------------ButtonBar-----按钮横向排布----------------
  Widget getButtonBar(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        buttonTheme: ButtonThemeData(
          //设置水平方向边距
          padding: EdgeInsets.symmetric(horizontal: 25.0)
        )
      ),
      child: ButtonBar(
        children: <Widget>[
          OutlineButton(
            child: Text('RaisedButton'), //按钮文字
            textColor: Colors.purple, //按钮文字颜色
            onPressed: () {}, //按钮点击事件
            splashColor: Colors.grey, //点击时溅墨效果颜色
            shape: StadiumBorder(), //Stadium Border翻译体育场边界,所以像跑道
            //设置 描边颜色
            borderSide: BorderSide(color: Colors.black),
            highlightedBorderColor: Colors.red, //点击时，边框变色
          ),
          OutlineButton(
            child: Text('RaisedButton'), //按钮文字
            textColor: Colors.purple, //按钮文字颜色
            onPressed: () {}, //按钮点击事件
            splashColor: Colors.grey, //点击时溅墨效果颜色
            shape: StadiumBorder(), //Stadium Border翻译体育场边界,所以像跑道
            //设置 描边颜色
            borderSide: BorderSide(color: Colors.black),
            highlightedBorderColor: Colors.red, //点击时，边框变色
          ),
        ],
      ),
    );
  }
}

演示效果：
在这里插入图片描述

showSnackbar.dart 弹出Snackbar简单封装：

import 'package:flutter/material.dart';
  // Snackbar
  void showSnackbar(String message){
    var snackBar = SnackBar(content: Text(message),);
    _scaffoldkey.currentState.showSnackBar(snackBar);
  }

  var _scaffoldkey = new GlobalKey<ScaffoldState>();

  getScaffoldkey(){
    return _scaffoldkey;
  }
RedKeyer
关注
专栏目录
Flutter基建 - 按钮全解析
Taonce的博客
03-17 1030
我是。
Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）
热门推荐
喻志强的博客
12-17 8万+
Flutter中给我们预先定义好了一些按钮控件给我们用，常用的按钮如下 RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton FlatButton ：扁平化的按钮，继承自MaterialButton OutlineButton ：带边框的按钮，继承自MaterialButton IconB...
flutter 命令
最新发布
m0_56590688的博客
06-15 498
【代码】flutter 命令。
【Flutter入门到进阶】Flutter基础篇---按钮、弹框、页面跳转
Yvan
03-02 2077
示例// 自定义dialogFunction()?onClosed;key,@overridePadding(Align(),Align(),],),),Container(],),)),说明所谓toast框其实就是在图层的最上面一层插入一个显示图层，在Flutter中利用OverLayEntry构建图层，然后通过Overlay进行插入示例//top值，可以改变这个值来改变toast在屏幕中的位置)),));
Flutter 组件集录 | 新一代 Button 按钮参上
张风捷特烈的博客
10-01 405
theme: cyanosis 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 2 天，点击查看活动详情 0. 按钮一族现状 随着 Flutter 3.3 的发布，RaisedButton 组件从 Flutter 框架中移除，曾为界面开疆拓土的 按钮三兄弟 彻底成为历史。 另外 MaterialButton、RawMaterialButton 也将在未...
SnackBar源码解析及封装
小口口的博客
03-15 3103
本文主要简述了通过修改SnackBar的源码来实现更多的拓展功能。如：自定义显示时间、显示位置及显示动画效果和自定义滑动等功能。
Flutter Animation动画开发之——repeat循环播放
01-20
在Flutter开发中，动画是构建用户界面的重要组成部分，它能够为应用增添动态效果，提高用户体验。本篇文章将深入探讨如何使用`AnimationController`实现动画的循环播放。 在Flutter中，`AnimationController`是控制...
Flutter(十)——登录界面实现
李元静
01-31 2万+
本文目录登录界面 登录界面 在手机App的开发过程中，基本没有App都会有登录界面，所以我们今天将使用Flutter来实现登录界面的效果。 首先，我们需要掌握登录界面有那些元素，比如用户名，密码提示以及输入框，其次可能还有上面的logo，下面的登录按钮，以及忘记密码等显示。 前面博主讲解组件的时候，已经讲过，在Flutter开发中，一切皆组件，也就是说，你可以把界面直接赋值给一个变量，比如前面的操...
Flutter性能优化实践 —— UI篇
2401_84408092的博客
05-03 590
最后小编想说：不论以后选择什么方向发展，目前重要的是把Android方面的技术学好，毕竟其实对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！这里附上我整理的几十套腾讯、字节跳动，京东，小米，头条、阿里、美团等公司19年的Android面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。由于篇幅有限，这里以图片的形式给大家展示一小部分。
Flutter(九)——Drawer侧滑菜单与包管理
李元静
01-30 2万+
本文目录包管理实现侧滑效果 包管理 一个完整的应用或多或少会使用一些第三方包来开发，这样可以避免重复造轮子，就像Java开发Android引入的Xutils，Glide以及奶油刀等。其中，我们都知道Android中对包的管理是gradle，IOS用Cocoapods对包进行管理。（侧滑菜单实现效果图） 而在Flutter中，则通过pubspec.yaml配置文件对包进行管理，就像博主前面讲解Im...
Flutter开发之——基本组件-Button
m0_66070762的博客
01-02 2938
| 编号 | 属性 | 说明 | | :-: | :-: | :-: | | 1 | onPressed | 点击事件监听，传 null 表示按钮禁用 | | 2 | onHighlightChanged | 水波纹高亮变化回调,按下返回true,抬起返回false | | 3 | textTheme | 定义按钮主题 | | 4 | textColor | 按钮文字颜色 | | 5 | disabledTextColor | 无效按钮文字颜色 | | 6 | color | 按钮颜色 | | 7 | di
Flutter Button 按钮.dart
10-05
在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。 一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。 RaisedButton：凸起的按钮，其实就是 Material Design 风格的 Button FlatButton：扁平化的按钮 OutlineButton：线框按钮 IconButton：图标按钮 ButtonBar：按钮组 FloatingActionButton：浮动按钮 DropdownButton：下拉框按钮
Flutter之SnackBar原理详解
菜鸟博客
05-28 3928
初次学习SnackBar控件，第一反应就是这货怎么感觉跟Android的Toast一样！使用起来确实简单 Snackbar的作用就是在屏幕的底部展示一个简短的消息,与此同时，Snackbar也可以与用户进行交互，实现效果如下图： 如上图所示SnackBar分成两个部分：内容区域（content）+交互区域（action）。Scaffold是可以配置底部导航tab的，如果配置了的话，SnackBar怎么展示呢？如下图可以看出SnackBar紧贴着底部导航tab展示： 上面两图展示SnackBar的代码如下
flutter 安装、依赖与问题
fearlessnesszhang的博客
06-18 3135
flutter安装 第一步安装 参考了大佬的安装教程，包含安装flutter插件和Dart插件：https://blog.csdn.net/qq_43652113/article/details/109147765 第二部添加设备 添加设备，可以在Android studio 中右上角点击AVD Manage 选择一个设备进行下载，等待 第三步启动 设备添加完毕，直接点击启动，即可以看到官方提供的模板 ———————————————— 版权声明：本文为CSDN博主...
用Flutter自定义一个Button
输出与提升
10-15 2608
简介 Flutter是谷歌开发的跨平台UI工具包。通过Flutter工具包，我们能够构建出大多数APP，能运行在Android，IOS，桌面，嵌入式设备。 同时， Flutter作为UI工具包，但也提供了插件，让Flutter与原生Android或者IOS进行通信。本文总结介绍Flutter中的widget，它作为应用的骨骼，贯穿于应用始终。 Widget Flutter提出了一切皆Widget的设计思想，如同汽车领域，使用零部件组装汽车一样，Flutter利用Widget来“组装”应用。 .
flutter安装程序和依赖包国内镜像以及下载地址集合
kunyus的博客
08-31 2550
现象 国内下载flutter和安装依赖实在是太太太太太慢了！！！简直无法忍受！！！ 解决方案 下面是国内几个镜像，PUB_HOSTED_URL是Dart依赖包地址，FLUTTER_STORAGE_BASE_URL是Flutter依赖文件地址。 下载安装包 要手动下载最新版本的flutter SDK包，可以访问FLUTTER_STORAGE_BASE_URL 地址，然后进入/flutter_infra/releases/目录下载（这个方式Flutter社区不可用）。 比如使用腾讯云开源镜像站 // 所有稳定版
Flutter开发-flutter安装其他依赖遇到的问题（Windows）
u013275973的专栏
07-20 1万+
运行 flutter doctor  Flutter 提供了一个 flutter doctor 命令协助我们安装 Flutter 的依赖。它会检查本地是否有 iOS 和 Android 的开发环境。如果检测到依赖缺失，它还会给出对应依赖的安装方法 运行以下命令查看是否需要安装其它依赖项来完成安装： flutter doctor --verbose 简写 flutter doctor --...
查看 flutter 安装其它依赖项遇到的问题
狼族小子的专栏
07-05 1万+
运行 flutter doctor 运行以下命令查看是否需要安装其它依赖项来完成安装： flutter doctor --verbose 简写 flutter doctor --v 该命令检查您的环境并在终端窗口中显示报告 $ flutter doctor -v [✓] Flutter (Channel master, v0.5.7-pre.55, on Mac OS X ...
Flutter开发实战详解：从基础到高级
"Flutter完整开发实战详解系列.pdf" 这篇PDF文档是一个深入浅出的Flutter开发教程，涵盖了从基础知识到高级概念的全面内容。它适合初学者和有经验的开发者，提供了丰富的实战经验和技巧，帮助读者掌握Flutter这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值