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

已于 2022-12-14 09:44:22 修改
阅读量480 收藏
点赞数
分类专栏： Flutter 文章标签： flutter android
于 2022-12-13 23:12:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/128309464
版权

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

文章目录

一、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('我被长按了');
    },
);

七、ButtonStyle 按钮样式

1、概述

ButtonStyle 是大多数按钮的共同样式。

按钮及其主题有一个 ButtonStyle 属性，该属性定义其默认值将被覆盖的视觉属性。默认值由各个按钮小部件定义，通常基于整体主题的ThemeData.colorScheme和ThemeData.textTheme。

2、构造方法

注释见代码示例。

const ButtonStyle({
    this.textStyle,
    this.backgroundColor,
    this.foregroundColor,
    this.overlayColor,
    this.shadowColor,
    this.surfaceTintColor,
    this.elevation,
    this.padding,
    this.minimumSize,
    this.fixedSize,
    this.maximumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
    this.alignment,
    this.splashFactory,
  });

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: Center(
          child: ElevatedButton(
            onPressed: () {
              print("Hello World");
            },
            child: const Text("Hello World"),
            style: ButtonStyle(
              // 文本样式
              textStyle: MaterialStateProperty.all(
                // 这个字体样式里面的颜色，并不能改变文本的颜色
                // 但 fontSize 可以改变文本的大小，fontWeight 可以改变文本的粗细
                const TextStyle(fontSize: 20, color: Colors.red, fontWeight: FontWeight.bold),
              ),
              // 背景色
              backgroundColor: MaterialStateProperty.all(Colors.green),
              // 前景色：这才是改变文本的颜色
              foregroundColor: MaterialStateProperty.all(Colors.red),
              // 叠加颜色：这个是点击时候的颜色
              overlayColor: MaterialStateProperty.all(Colors.black),
              // 阴影颜色
              shadowColor: MaterialStateProperty.all(Colors.yellow),
              // 表面颜色：这个暂时没发现效果在哪，不做过多解释
              surfaceTintColor: MaterialStateProperty.all(Colors.purple),
              // 悬浮高度
              elevation: MaterialStateProperty.all(10),
              // 内边距
              padding: MaterialStateProperty.all(const EdgeInsets.all(20)),
              // 最小尺寸
              minimumSize: MaterialStateProperty.all(const Size(200, 200)),
              // 固定尺寸
              fixedSize: MaterialStateProperty.all(const Size(200, 200)),
              // 最大尺寸
              maximumSize: MaterialStateProperty.all(const Size(200, 200)),
              // 边框
              side: MaterialStateProperty.all(const BorderSide(color: Colors.red, width: 5)),
              // 形状
              shape: MaterialStateProperty.all(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
              ),
              // 鼠标光标
              mouseCursor: MaterialStateProperty.all(
                SystemMouseCursors.forbidden,
              ),
              // 视觉密度
              visualDensity: VisualDensity.adaptivePlatformDensity,
              // 点击目标大小
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
              // 动画时长
              animationDuration: const Duration(seconds: 1),
              // 启用反馈：没看出来效果
              enableFeedback: true,
              // 对齐方式（内部文本的）
              alignment: Alignment.topLeft,
              // 飞溅工厂（点击水波效果）
              splashFactory: InkRipple.splashFactory,
            ),
          ),
        ),
      ),
    );
  }
}

运行结果

1245f3275f1152afa60a36eafa5d99b

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

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅识Flutter 基本组件之按钮组件 Raisebutton\ FlatButton\ OutlineButton按钮
qq_43336158的博客
04-01 2200
按钮组件是应用程序中用于交互的最常用的组件之一, MaterialWidget库中提供了多种按钮Widget,如 RaisedButton(凸起按钮组件)、FlatButton(扁平按钮组件）和OutlineButton(带边框按钮组件)等，它们都是直接或间接对RawMaterialButton的包装定制,从而形成不同的外观样式，所以它们的属性和使用方法基本一样.
flutter-material-cheat-sheet：Flutter的Material包装的备忘单
02-04
`flutter-material-cheat-sheet`是一个专门为Flutter开发者设计的Material组件参考资源，它提供了一个简洁明了的备忘单，帮助开发者快速理解和使用Material Design组件。 在Flutter中，Material包是实现Material ...
Flutter 组件（三）按钮类组件
jclee95的个人博客
06-26 1247
本文介绍Flutter框架中各种按钮组件的用法。
Flutter基建 - 按钮全解析
Taonce的博客
03-17 879
我是。
Flutter开发之——基本组件-Button
我的博客
03-17 1513
一 概述 Flutter 提供了 10 多种 Button 类组件，本文 对按钮进行简单分类 Button的常用属性和方法 Button的简单使用示例及效果 Button的自定义 二 按钮分类(按照父类不同) 2.1 继承ButtonStyleButton(图标+文字) TextButton ElevatedButton OutlinedButton 2.2 继承MaterialButton(图标+文字) FlatButton RaisedButton OutlineButton 自定义Mat
flutter 做底部的三个按键，有叠加，有填充
weixin_44911775的博客
07-29 517
代码】flutter做底部的三个按键，有叠加，有填充。
flutter-todo-scoped-model：使用Flutter和ScopedModel构建的基本todo应用
02-04
虽然这个示例相对简单，但它演示了在实际项目中如何组织和管理状态，为更复杂的Flutter应用奠定了基础。在进一步学习中，还可以探索其他状态管理解决方案，如Provider、Riverpod或Bloc，以适应更大型和复杂的应用...
flutter-01-person-counter:颤振项目
04-08
综上所述，"flutter-01-person-counter"项目涵盖了Flutter开发的基础知识，包括Dart语言、小部件创建、布局管理、事件处理以及状态管理等核心概念。通过这个项目，初学者可以学习到构建Flutter应用的基本流程，并...
flutter-piggy-treeview：扑动的常见树视图
02-04
在实际项目中，"flutter-piggy-treeview"不仅可以用于展示数据，还可以配合其他Flutter组件，如`Provider`或`Riverpod`进行状态管理，实现更复杂的交互逻辑。结合`Navigator`，可以构建多级导航菜单，实现深度链接。...
flutter-expenses-app:Flutter实践项目
03-29
本项目“flutter-expenses-app”是一个基于Flutter的实践应用，旨在帮助开发者掌握Flutter的基础知识和最佳实践，包括常见的UI元素、用户输入处理、设备方向感知以及原生外观适配。 1. **典型UI元素**： Flutter...
【Flutter -- 基础组件】Flutter 布局
Kevin Learn Android
07-19 690
Flutter 中拥有 30 多种预定义的布局 widget，常用的有 Container、Padding、Center、Flex、Row、Colum、ListView、GridView 。用一个思维导图列出它们的特性和使用。
Flutter 按钮介绍 CupertinoButton、TextButton、ElevatedButton、OutlinedButton、IconButton
xhuww的博客
07-06 4133
本文介绍Flutter中的按钮 CupertinoButton、TextButton、ElevatedButton、OutlinedButton、IconButton等控件的使用，以及自定义响应点击事件。
Flutter控件——常用控件：按钮
wzj_what_why_how的博客
06-15 806
Flutter 按钮
Flutter常用命令
我叫柱子哥
07-22 832
CocoaPods 是 iOS 和 macOS 项目中常用的依赖管理工具。它的实现原理涉及依赖解析、Podspec 处理、Xcode 项目集成等多个方面。下面将详细讲解 CocoaPods 的实现原理。
ThinkPHP对接易联云打印
qq_40088333的博客
07-24 338
ThinkPHP对接易联云打印
Unity发布安卓解决报错： You will no longer be able to disable R8
飞浪纪元FE的博客
07-24 337
更换U3D版本，也会更新后端编译的版本，弃用掉过时代码和警告。 后端：IL2CPP+.NetStandard 2.1。
堆的基本实现
最新发布
zc331的博客
07-25 536
在提出堆的概念之前，首先要了解二叉树的基本概念一颗二叉树是节点的有限集合，该集合：1、或者为空；2、或者由一个根节点加上两颗分别称为左子树和右子树的两颗子树构成；堆就是一颗完全二叉树；堆有两种：小堆和大堆堆在内存上的存储是数组形式的（物理结构）；我们认为想象成链式结构（逻辑结构）通过数组结构去实际存储，有这样的规律：每个父节点的下标乘以2加1就是左孩子节点，加2就是右孩子节点；无论是左孩子还是右孩子，其下标减去1再 /2 就是父节点的下标，这就是通过数组存储堆（完全二叉树）的优点。
Android --- ContentProvider 内容提供者
weixin_43244083的博客
07-24 628
ContentProvider 是 Android中用于数据共享的机制，主要是用于进程间(App之间)。
Flutter基础组件详解：Material设计与示例
在 Flutter 开发中，基础组件是构建用户界面的关键元素。Flutter 提供了两种主要的组件风格：Material 和 Cupertino。Material 风格遵循 Google 的 Material Design 规范，提供了广泛且一致的视觉效果，适用于多种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值