Flutter 内置按钮介绍及使用

news/2024/7/20 22:00:39 标签: flutter, android, ios

Flutter 提供了多种内置按钮,可以满足不同场景的需求。本文将介绍 Flutter 中常见的按钮类型,以及它们的属性和使用方法。

按钮类型

Flutter 中常见的按钮类型包括:

  • ElevatedButton: 凸起按钮,默认带有阴影和灰色背景。
  • TextButton: 扁平按钮,默认背景透明并不带阴影。
  • OutlineButton: 边框按钮,默认有一个边框,不带阴影且背景透明。
  • IconButton: 图标按钮,仅包含一个图标。
  • FloatingActionButton: 浮动按钮,通常用于显示在屏幕右下角,执行重要的操作。

按钮属性

Flutter 按钮的通用属性包括:

  • onPressed: 点击按钮时触发的回调函数。
  • onLongPress: 长按按钮时触发的回调函数。
  • child: 按钮的内容,可以是文本、图标或其他 Widget。
  • color: 按钮的颜色。
  • shape: 按钮的形状。
  • elevation: 按钮的阴影高度。
  • highlightElevation: 按钮按下时的阴影高度。
  • disabledColor: 按钮禁用时的颜色。
  • splashColor: 按钮按下时出现的涟漪颜色。

按钮使用示例

以下是使用不同类型按钮的示例:

示例 1:使用 ElevatedButton

ElevatedButton(
  onPressed: () {
    // 点击按钮时触发
  },
  child: Text('点击'),
),

示例 2:使用 TextButton

TextButton(
  onPressed: () {
    // 点击按钮时触发
  },
  child: Text('点击'),
),

示例 3:使用 OutlineButton

OutlineButton(
  onPressed: () {
    // 点击按钮时触发
  },
  child: Text('点击'),
),

示例 4:使用 IconButton

IconButton(
  onPressed: () {
    // 点击按钮时触发
  },
  icon: Icon(Icons.add),
),

示例 5:使用 FloatingActionButton

FloatingActionButton(
  onPressed: () {
    // 点击按钮时触发
  },
  child: Icon(Icons.add),
),

总结

Flutter 提供了多种内置按钮,可以满足不同场景的需求。通过设置不同的属性,可以自定义按钮的外观和行为。


http://www.niftyadmin.cn/n/5456052.html

相关文章

滑动窗口_水果成篮_C++

题目: 题目解析: fruits[i]表示第i棵树,这个fruits[i]所表示的数字是果树的种类例如示例1中的[1,2,1],表示第一棵树 的种类是 1,第二个树的种类是2 第三个树的种类是1随后每一个篮子只能装一种类型的水果,我…

mysql80-DBA数据库学习1-数据库安装

掌握能力 核心技能 核心技能 mysql部署 官网地址www.mysql.com 或者www.oracle.com https://dev.mysql.com/downloads/repo/yum/ Install the RPM you downloaded for your system, for example: yum install mysql80-community-release-{platform}-{version-number}.noarch…

计算机网络:传输控制协议(Transmission Control Protocol-TCP协议

计算机网络:传输控制协议(Transmission Control Protocol-TCP协议) 本文目的前置知识点TCP协议简介主要特性通信流程1. 建立连接的过程(三次握手,243)1.1 为什么要三次握手,两次不行吗? 2. 释放连接的过程(…

如何购买小程序模板开发企业小程序

在当今数字化时代,小程序已成为企业展示与营销的重要工具。购买一个小程序模板,来快速上线自己的企业小程序,已成为当前最流行且性价比最高的开发方式。 乔拓云网站提供了丰富的小程序模板资源,无论你需要哪种风格或功能的小程序&…

每日学习笔记:C++ STL迭代器适配器

Reverse(反向)迭代器 定义 正常迭代器与反向迭代器的转换 正常迭代器 to 反向迭代器 反向迭代器 to 正常迭代器 Insert(安插型)迭代器 定义 尾部安插型 头部安插型 通用安插型(指定安插位置) Stream(串流&#…

后端前行Vue之路(一):初识Vue

1.Vue是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方…

极简wordpress网站模板

Pithy设计师wordpress网站模板 精练简洁的wordpress模板,设计师或设计工作室展示型网站模板。 https://www.jianzhanpress.com/?p6329

SpringBoot学习之ElasticSearch下载安装和启动(Windows版)(三十)

本文先写windows下的下载安装和启动,后续有时间再补充其他环境下(Mac、Linux、Docker)的,这里我们后续对ElasticSearch简称为ES,读者习惯这一称呼就好。 一,ES下载 可以百度【ElasticSearch官网】或者直接点击这里的ES官网下载地址:​​​​​ Download Elasticsearch…