【Flutter 组件】003-基础组件：按钮

news2024/11/24 2:15:41

【Flutter 组件】003-基础组件：按钮

文章目录

  • 【Flutter 组件】003-基础组件：按钮
  • 一、ElevatedButton 悬浮按钮
    • 1、概述
    • 2、构造方法
    • 3、示例
      • 代码示例
      • 运行结果
  • 二、TextButton 文本按钮
    • 1、概述
    • 2、构造方法
    • 3、示例
      • 代码示例
      • 运行结果
  • 三、OutlinedButton 边框按钮
    • 1、概述
    • 2、构造方法
    • 3、示例
      • 代码示例
      • 运行结果
  • 四、IconButton 图标按钮
    • 1、概述
    • 2、构造方法
    • 3、示例
      • 代码示例
      • 运行结果
  • 五、带图标的按钮
    • 1、概述
    • 2、示例
      • 代码示例
      • 运行结果
  • 六、点击和长按事件
    • 1、点击事件
    • 2、长按事件
  • M、扩展阅读
  • N、参考资料

一、ElevatedButton 悬浮按钮

**按钮概述：**Material 组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们都是直接或间接对RawMaterialButton 组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。

所有 Material 库中的按钮的共同点：

  1. 按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按钮上会出现水波扩散的动画）。
  2. 有一个 onPressed 属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

1、概述

ElevatedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大。

2、构造方法

const ElevatedButton({
    super.key,
    required super.onPressed,
    super.onLongPress,
    super.onHover,
    super.onFocusChange,
    super.style,
    super.focusNode,
    super.autofocus = false,
    super.clipBehavior = Clip.none,
    super.statesController,
    required super.child,
  });

3、示例

代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("訾博的学习笔记")),
      body: const MyApp(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        child: ElevatedButton(
          // 点击事件
          onPressed: () {
            print("Hello World");
          },
          // 按钮样式
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.blue),
          ),
          // 内容
          child: const Text("Hello World"),
        ),
      ),
    );
  }
}

运行结果

微信图片_20221212213151

二、TextButton 文本按钮

1、概述

TextButton即文本按钮，默认背景透明并不带阴影。按下后，会有背景色。

2、构造方法

const TextButton({
    super.key,
    required super.onPressed,
    super.onLongPress,
    super.onHover,
    super.onFocusChange,
    super.style,
    super.focusNode,
    super.autofocus = false,
    super.clipBehavior = Clip.none,
    super.statesController,
    required Widget super.child,
  });

3、示例

代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("訾博的学习笔记")),
      body: const MyApp(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        child: TextButton(
          // 点击事件
          onPressed: () {
            print("Hello World");
          },
          // 按钮内容
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

运行结果

微信图片_20221212220139

三、OutlinedButton 边框按钮

1、概述

OutlinedButton 默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。

2、构造方法

const OutlinedButton({
    super.key,
    required super.onPressed,
    super.onLongPress,
    super.onHover,
    super.onFocusChange,
    super.style,
    super.focusNode,
    super.autofocus = false,
    super.clipBehavior = Clip.none,
    super.statesController,
    required Widget super.child,
  });

3、示例

代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("訾博的学习笔记")),
      body: const MyApp(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        child: OutlinedButton(
          // 点击事件
          onPressed: () {
            print("Hello World");
          },
          // 按钮内容
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

运行结果

26deacd02be596de12e13abf16896aa

四、IconButton 图标按钮

1、概述

IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。

2、构造方法

const IconButton({
    super.key,
    this.iconSize,
    this.visualDensity,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    this.splashRadius,
    this.color,
    this.focusColor,
    this.hoverColor,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    required this.onPressed,
    this.mouseCursor,
    this.focusNode,
    this.autofocus = false,
    this.tooltip,
    this.enableFeedback = true,
    this.constraints,
    this.style,
    this.isSelected,
    this.selectedIcon,
    required this.icon,
  }) : assert(padding != null),
       assert(alignment != null),
       assert(splashRadius == null || splashRadius > 0),
       assert(autofocus != null),
       assert(icon != null);

3、示例

代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("訾博的学习笔记")),
      body: const MyApp(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        child: IconButton(
          // 图标
          icon: const Icon(Icons.add),
          // 点击事件
          onPressed: () {
            print("Hello World");
          },
        ),
      ),
    );
  }
}

运行结果

5517f6d2360056c18ef73fca5197f24

五、带图标的按钮

1、概述

ElevatedButton、TextButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮。

2、示例

代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("訾博的学习笔记")),
      body: const MyApp(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        child: Center(
          child: Column(
            children: [
              ElevatedButton.icon(
                icon: Icon(Icons.send),
                label: Text("发送"),
                onPressed: () {},
              ),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("添加"),
                onPressed: () {},
              ),
              TextButton.icon(
                icon: Icon(Icons.info),
                label: Text("详情"),
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

运行结果

edd491e30abb4dc1d8521c6e9cd681f

六、点击和长按事件

1、点击事件

ElevatedButton(
     child: Text("爱你"),
     onPressed: () {
         print('我被点击了');
    },
);

2、长按事件

ElevatedButton(
     child: Text("爱你"),
     onLongPress : () {
         print('我被长按了');
    },
);

M、扩展阅读

Flutter 中圆角按钮，渐变色按钮

https://blog.csdn.net/qq_44888570/article/details/120906870

N、参考资料

Flutter的button的按钮ElevatedButton

https://blog.csdn.net/qq_41619796/article/details/115658314

Flutter 实战

https://book.flutterchina.club/chapter3/buttons.html#_3-2-1-elevatedbutton

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/87121.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

本地搭建xxl-job服务及连接验证

本地搭建xxl-job服务及连接验证

1、本地搭建xxl-job服务 1.1、使用git下载https://github.com/xuxueli/xxl-job.git代码 1.2、使用idea打开下载的项目，切换2.2.0分支 1.3、 源码主要包括3部分，admin模块是控制台的 core包是核心包，包括一些调度的逻辑等，项目中…
阅读更多...
负荷预测|一种改进支持向量机的电力负荷预测方法研究（Matlab代码实现）

负荷预测|一种改进支持向量机的电力负荷预测方法研究（Matlab代码实现）

💥💥💥💞💞💞欢迎来到本博客❤️❤️❤️💥💥💥 📝目前更新：🌟🌟🌟电力系统相关知识，期刊论文&…
阅读更多...
[附源码]Python计算机毕业设计SSM基于的防疫隔离服务系统（程序+LW)

[附源码]Python计算机毕业设计SSM基于的防疫隔离服务系统（程序+LW)

项目运行 环境配置： Jdk1.8 Tomcat7.0 Mysql HBuilderX（Webstorm也行） Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。 项目技术： SSM mybatis Maven Vue 等等组成，B/S模式 M…
阅读更多...
从Qt 4到Qt 5（一）Qt 5.2安装、程序迁移和发布

从Qt 4到Qt 5（一）Qt 5.2安装、程序迁移和发布

导语 Qt 5的第二个重大版本Qt 5.2的beta版终于发布了，Qt 5.2是官方一再强调开发Android要使用的版本。经过了近一年的等待，这次终于可以完成夙愿，继续更新Qt系列教程了。在后面的教程中会尽量涉及大家经常问到、急需解决的问题，也…
阅读更多...
YOLOV7 目标检测模型调试记录

YOLOV7 目标检测模型调试记录

前言 YOLO系列在目标检测领域可谓名声赫赫，其性能表现不俗，如今其已经更新到了YOLOV7版本，今天便来一睹其风采。 博主之前只是对YOLO算法的原理一知半解，并未实验，因此并不熟练，因此，借此机会来…
阅读更多...
【JavaSE成神之路】一文洞悉Java的方法

【JavaSE成神之路】一文洞悉Java的方法

哈喽，我是兔哥呀，今天就让我们继续这个JavaSE成神之路！ 这一节啊，咱们要学习的内容是Java语言的方法。 目录 1.什么是Java方法 2.快速入门Java方法 3.如何调用Java方法 4.关于Java方法重载这件事 作业 1.什么是Java方法 Jav…
阅读更多...
补遗： CS61a

补遗： CS61a

补遗： CS61a 通过“圣经”《SICP》 了解到这门课。SCIP读着有点困难，想通过课程的引导。但是这个课程要比书基础很多，就当对计科学习的回顾和补遗了。本笔记也会在我读完 SICP 后更新。 课程地址：CS 61A Fall 2022 参照原书目录…
阅读更多...
第52篇 Qt Quick简介

第52篇 Qt Quick简介

导语 在上一篇我们已经安装好了Qt 5.5，现在正式开始学习Qt5中全新的Qt Quick编程。Qt Quick对于大部分人来说是一个全新的概念，对这样一个全新的东西要怎样开始学习呢？在没有专业书籍（当然，《Qt 5编程入门》现在已经出…
阅读更多...
java计算机毕业设计ssm在线学习系统的设计与开发3nnzq（附源码、数据库）

java计算机毕业设计ssm在线学习系统的设计与开发3nnzq（附源码、数据库）

java计算机毕业设计ssm在线学习系统的设计与开发3nnzq（附源码、数据库） 项目运行 环境配置： Jdk1.8 Tomcat8.5 Mysql HBuilderX（Webstorm也行） Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&a…
阅读更多...
MapReduce 工作原理

MapReduce 工作原理

文章目录MapReduce 工作原理一、MapReduce工作过程二、MapTask工作原理三、Reduce Task工作原理四、Shuffle工作原理五、MapReduce编程组件1、inputFormat组件2、Mapper组件3、Reducer组件4、Partitioner组件5、Combiner组件6、OutputFormat组件六、MapReduce运行模式1、本地运…
阅读更多...
关于个人网站的搭建日志（1）静态网页

关于个人网站的搭建日志（1）静态网页

注：这篇文章不是教程，仅仅是个人踩过的一些坑的整理，建议大家去和前辈们多多交流，祝早日进步 （1）第一步，关于服务器： 我这里使用的是阿里云的云服务器（0元一个月。。。…
阅读更多...
视觉合集4

视觉合集4

这里总结一些论文,包括多标签分类、姿态估计、目标检测、HOI、小样本学习等研究方向。 01 面向具有标注噪声的人脸表情识别 Attack can Benefit: An Adversarial Approach to Recognizing Facial Expressions under Noisy Annotations 大规模人脸表情数据集通常表现出极端的…
阅读更多...
基于VBA实现电缆结构自动出图(一)——自动出圆形

基于VBA实现电缆结构自动出图(一)——自动出圆形

大家敢相信吗，原来VBA竟然可以实现电缆结构自动出图，换句话说，只要输入数据，VBA会自动将电缆的结构画出来，同时还可以渲染，结果竟然不输画图软件，真真让我刮目相看。这里我就不过多介绍VBA了&am…
阅读更多...
类的六个默认成员函数

类的六个默认成员函数

1.类的6个默认成员函数 如果一个类中什么成员都没有，简称为空类。空类中什么都没有吗？并不是的，任何一个类在我们不写的情 况下，都会自动生成下面6个默认成员函数。 2.构造函数 构造函数是一个特殊的成员函数，名字与…
阅读更多...
STM32F4 | 跑马灯实验

STM32F4 | 跑马灯实验

文章目录一、 STM32F4 IO 口简介二、硬件设计三、软件设计1.位带操作（F7除外）四、实验现象五、STM32CubeMX 配置 IO 口输入在本章中，我们将通过代码控制 ALIENTEK 阿波罗 STM32 开发板上的两个 LED 灯 DS0 和 DS1 交替闪烁，实…
阅读更多...
【salesforce Admin必备】-想到啥写点啥

【salesforce Admin必备】-想到啥写点啥

【salesforce Admin必备】-想到啥写点啥 文章目录【salesforce Admin必备】-想到啥写点啥前言一，货币相关1.带汇率的多种货币-Activate multiple currencies with exchange rates1.1 启用多币种2.Update the Exchange Rate with ACM2.1启用高级货币管理（…
阅读更多...
数据结构【树和二叉树的相关知识和题目】

数据结构【树和二叉树的相关知识和题目】

文章目录引言：一、树和二叉树的相关知识（一、）什么是树1.树（1.）日常生活中的树（2.）树的基本概念（非线性结构）（3.）代码人眼中的树：&…
阅读更多...
ORB-SLAM2 --- Tracking::UpdateLocalKeyFrames函数

ORB-SLAM2 --- Tracking::UpdateLocalKeyFrames函数

目录 1.函数作用 2. 函数步骤 3.code 4.函数解析 4.1 记录共视 4.2 更新局部关键帧（mvpLocalKeyFrames） 4.3 更新当前帧的参考关键帧，与自己共视程度最高的关键帧作为参考关键帧 1.函数作用 跟踪局部地图函数里，更新局部…
阅读更多...
【在SpringBoot项目中删除相册数据--Service层】

【在SpringBoot项目中删除相册数据--Service层】

由于AlbumMapper.java中已经实现了“根据id删除数据表中的相册数据”，所以，可以直接从Service开始开发此功能。 先在IAlbumService中添加抽象方法： /** * 删除相册 * param id 尝试删除的相册的id */ void delete(Long id); 然后&#xf…
阅读更多...
[附源码]Python计算机毕业设计SSM基于web的烟草售卖系统（程序+LW)

[附源码]Python计算机毕业设计SSM基于web的烟草售卖系统（程序+LW)

项目运行 环境配置： Jdk1.8 Tomcat7.0 Mysql HBuilderX（Webstorm也行） Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。 项目技术： SSM mybatis Maven Vue 等等组成，B/S模式 M…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023