flutter学习-day9-基础组件

📚 目录

  1. 文本及字体样式
  2. 各种按钮
  3. 图片
  4. icon
    1. 自定义字体图标
  5. 单选开关和复选框
  6. 输入框和表单
    1. TextField
    2. Form
    3. 登录界面例子
  7. 进度指示器
    1. 线形LinearProgressIndicator
    2. 环形CircularProgressIndicator

本文学习和引用自《Flutter实战·第二版》:作者:杜文

1. 文本及样式

  • Text:用于显示简单样式文本,它包含一些控制文本显示样式的一些属性:
// 字符串重复4次
Text("Hello world"*4,// 左对齐textAlign: TextAlign.left,// 指定文本显示的最大行数maxLines: 1,// 文本截断后以省略符表示overflow: TextOverflow.ellipsis,// 相对于当前字体大小的缩放因子textScaleFactor: 1.5
);
  • TextStyle:用于指定文本显示的样式如颜色、字体、粗细、背景等:
Text("Hello world!",style: TextStyle(color: Colors.blue,fontSize: 18.0,// 行高 等于fontSize * heightheight: 1.2,  // 字体fontFamily: "Courier",background: Paint()..color=Colors.yellow,// 下划线decoration:TextDecoration.underline,// 下划线样式decorationStyle: TextDecorationStyle.dashed),
);
  • TextSpan:代表文本的一个片段,可对一个 Text 内容的不同部分按照不同的样式显示
Text.rich(TextSpan(children: [TextSpan(text: "链接: "),TextSpan(text: "https://pub.dev.com",style: TextStyle(color: Colors.blue),  recognizer: () => {print('xxyyxx')}),])
)
  • DefaultTextStyle:文本的样式默认是可以被继承的,可以用于指定文本的默认样式,如默认字体、颜色、大小等
// 设置文本默认样式
DefaultTextStyle(style: TextStyle(color:Colors.red,fontSize: 20.0,),textAlign: TextAlign.start,child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text("hello world"),Text("I am Jack"),Text("I am Jack",style: TextStyle(// 不继承默认样式inherit: false,color: Colors.grey),),],),
)
  • 字体使用

字体首先要在pubspec.yaml中声明它们,以确保它们会打包到应用程序中。然后通过TextStyle属性使用字体。

  • 在asset中声明
flutter:fonts:- family: Ralewayfonts:- asset: assets/fonts/Raleway-Regular.ttf- asset: assets/fonts/Raleway-Medium.ttfweight: 500- asset: assets/fonts/Raleway-SemiBold.ttfweight: 600- family: AbrilFatfacefonts:- asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
  • 使用
// 声明文本样式
const textStyle = const TextStyle(fontFamily: 'Raleway',// 假设上面的字体声明位于my_package包中 则需要指定包名package: 'my_package'
);// 使用文本样式
var buttonText = const Text("Use the font for this text",style: textStyle,
);

2. 各种按钮

Material 组件库中提供了多种按钮组件。他们都有如下特性:

  1. 点击时按钮上会出现水波扩散的“水波动画”
  2. 有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。
  • ElevatedButton漂浮按钮
// 默认带有阴影和灰色背景。按下后,阴影会变大
ElevatedButton(child: Text("normal"),onPressed: () {},
)
  • TextButton
// 默认背景透明并不带阴影。按下后,会有背景色
TextButton(child: Text("normal"),onPressed: () {},
)
  • OutlinedButton
// 默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和较弱的阴影
OutlinedButton(child: Text("normal"),onPressed: () {},
)
  • IconButton
// 可点击的Icon,不包括文字,默认没有背景,点击后会出现背景
IconButton(icon: Icon(Icons.thumb_up),onPressed: () {},
)
  • 带图标的按钮
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: () {},
)

3. 图片

Flutter 中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络资源。

  • ImageProvider:一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvider ,如AssetImage是实现了从Asset中加载图片的 ImageProvider,而NetworkImage 实现了从网络加载图片的 ImageProvider。

  • Image:Image widget 有一个必选的image参数,它对应一个 ImageProvider。

3-1. 加载本地图片

先在pubspec.yaml文件中flutter部分添加assets资源路径

Image(image: AssetImage("static/portrait.png"),width: 100.0
);
// or
Image.asset("static/portrait.png",width: 100.0,
)

3-2. 加载网络图片

Image(image: NetworkImage("https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),width: 100.0,
)
// or
Image.network("https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",width: 100.0,
)

3-3. 属性

属性描述
width-宽度
height-高度
fitfill、cover、contain、fitWidth、fitHeight、none适应模式
color-混合色
colorBlendMode-混合模式
repeat-指定图片的重复规则

4. icon

Flutter 中,可以像Web开发一样使用iconfont字体图标。Flutter默认包含了一套Material Design的(字体图标)[https://material.io/tools/icons/],在pubspec.yaml文件中的配置如下:

flutter:uses-material-design: true
  • 使用
String icons = "";
// accessible: 0xe03e
icons += "\uE03e";
// error:  0xe237
icons += " \uE237";
// fingerprint: 0xe287
icons += " \uE287";Text(icons,style: TextStyle(fontFamily: "MaterialIcons",fontSize: 24.0,color: Colors.green,),
);
  • 规范使用
Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Icon(Icons.accessible,color: Colors.green),Icon(Icons.error,color: Colors.green),Icon(Icons.fingerprint,color: Colors.green),],
)

4-1. 自定义字体图标

首先导入字体图标文件:

fonts:- family: myIcon  # 指定一个字体名fonts:- asset: fonts/iconfont.ttf

定义一个MyIcons类,功能和Icons类一样,将字体文件中的所有图标都定义成静态变量:

class MyIcons{// book 图标static const IconData book = const IconData(0xe614, fontFamily: 'myIcon', matchTextDirection: true);// 微信图标static const IconData wechat = const IconData(0xec7d,  fontFamily: 'myIcon', matchTextDirection: true);
}

使用

Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Icon(MyIcons.book,color: Colors.purple),Icon(MyIcons.wechat,color: Colors.green),],
)

5. 单选开关和复选框

Material 组件库中提供了 Material 风格的单选开关Switch和复选框Checkbox。但它们本身不会保存当前选中状态,选中状态都是由父组件来管理的。

class SwitchAndCheckBoxTestRoute extends StatefulWidget {_SwitchAndCheckBoxTestRouteState createState() => _SwitchAndCheckBoxTestRouteState();
}class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {// 维护单选开关状态bool _switchSelected = true;// 维护复选框状态bool _checkboxSelected=true;Widget build(BuildContext context) {return Column(children: <Widget>[Switch(// 当前状态value: _switchSelected,onChanged:(value){// 重新构建页面  setState(() {_switchSelected=value;});},),Checkbox(value: _checkboxSelected,// 选中时的颜色activeColor: Colors.red,onChanged:(value){setState(() {_checkboxSelected=value;});},)],);}
}

Checkbox的大小是固定的,无法自定义,而Switch只能定义宽度,高度也是固定的。

6. 输入框和表单

Material 组件库中提供了输入框组件TextField和表单组件Form

6-1. TextField

TextField用于文本输入

  • controller:编辑框的控制器,通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。
  • focusNode:用于控制TextField是否占有当前键盘的输入焦点。
  • InputDecoration:用于控制TextField的外观显示,如提示文本、背景颜色、边框等。
  • keyboardType:设置该输入框默认的键盘输入类型。
    • text:文本键盘
    • multiline:多行文本,需和maxLines配合使用(设为null或大于1)
    • number:数字键盘
    • phone:数字键盘并显示*和#
    • datetime:日期输入键盘,Android上会显示:和-
    • emailAddress:电子邮件地址 会显示@和.
    • url:url输入键盘 会显示/和.
  • textInputAction:设置键盘动作按钮的显示内容,默认是next
  • style:正在编辑的文本样式。
  • textAlign:输入框内编辑文本在水平方向的对齐方式。
  • autofocus:是否自动获取焦点
  • obscureText:是否隐藏正在编辑的文本,用于输入密码的场景等,文本内容会用•替换
  • maxLines:输入框的最大行数,默认为1;如果为null,则无行数限制。
  • maxLength:输入框文本的最大长度 设置后输入框右下角会显示输入的文本计数
  • maxLengthEnforcement:当输入文本长度超过maxLength时如何处理,如截断、超出等。
  • toolbarOptions:长按或鼠标右击时出现的菜单,包括 copy、cut、paste 以及 selectAll
  • onChange:输入框内容改变时的回调函数,也可以通过controller来监听。
  • onEditingComplete:输入框编辑完成时的回调函数。无参数。
  • onSubmitted:输入框编辑完成时的回调函数。接收当前输入内容做为参数。
  • inputFormatters:指定输入格式;当用户输入内容改变时,会根据指定的格式来校验。
  • enable:如果为false,则禁用输入框,不响应输入和事件,显示禁用态样式(在其decoration中定义)
  • cursorWidth:光标宽度
  • cursorRadius:光标圆角
  • cursorColor:光标颜色

6-2. Form

Form 组件,它可以对输入框进行分组,然后进行一些统一操作,如输入内容校验、输入框重置以及输入内容保存。Form继承自StatefulWidget对象,它对应的状态类为FormState,Form的子孙元素必须是FormField类型,为了方便使用,Flutter 提供了一个TextFormField组件,它继承自FormField类,也是TextField的一个包装类,所以除了FormField定义的属性之外,它还包括TextField的属性。

属性描述
autovalidate是否自动校验输入内容,默认为false,即只有点击操作按钮时才校验
onWillPop决定Form所在的路由是否可以直接返回(如点击返回按钮),该回调返回一个Future对象,如果 Future 的最终结果是false,则当前路由不会返回;如果为true,则会返回到上一个路由。此属性通常用于拦截返回按钮
onChangedForm内容改变时的回调函数,可以用于对输入内容进行校验。

FormState是Form的State类,可以通过Form.of()或GlobalKey获得。我们可以通过它来对Form的子孙FormField进行统一操作,常用方法如下:

  • FormState.validate():调用Form子孙FormField的validate回调,如果有一个校验失败,则返回false,所有校验失败项都会返回用户返回的错误提示。
  • FormState.save():调用Form子孙FormField的save回调,用于保存表单内容
  • FormState.reset():将子孙FormField的内容清空

6-3. 登录界面例子

import 'package:flutter/material.dart';class LoginPage extends StatefulWidget {const LoginPage({super.key});State<LoginPage> createState() {return LoginPageState();}
}class LoginPageState extends State<LoginPage> {TextEditingController userName = TextEditingController();TextEditingController password = TextEditingController();final formKey = GlobalKey<FormState>();void handleSubmit() {if ((formKey.currentState as FormState).validate()) {if (userName.text.length >= 6 && password.text.length >= 6) {// 提示ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('验证通过!')),);} else {// 清除内容formKey.currentState?.reset();// 提示ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('账号和密码长度不能低于6位数!')),);}} else {debugPrint('校验失败!');}}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text('Login Page'),),body: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Expanded(child: SingleChildScrollView(child: Padding(padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),child: Form(key: formKey,child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [TextFormField(autofocus: false,controller: userName,decoration: const InputDecoration(labelText: "账号:",hintText: "请输入账号",icon: Icon(Icons.person),),validator: (v) {return v!.trim().isNotEmpty ? null : '账号不能为空';},),TextFormField(autofocus: false,controller: password,decoration: const InputDecoration(labelText: "密码:",hintText: "请输入密码",icon: Icon(Icons.lock),),obscureText: true,validator: (v) {return v!.trim().isNotEmpty ? null : '密码不能为空';},),],),),),),),Padding(padding: const EdgeInsets.symmetric(vertical: 16),child: Row(children: [Expanded(child: Padding(padding: const EdgeInsets.symmetric(horizontal: 16),child: ElevatedButton(onPressed: handleSubmit,child: const Padding(padding: EdgeInsets.all(16.0),child: Text('登录'),),),),)],),)],),);}
}

7. 进度指示器

Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指示。

7-1. 线形LinearProgressIndicator

LinearProgressIndicator 是一个线性进度条,它显示一个进度条,可以显示当前的进度和总进度。没有提供尺寸参数,都是取父容器的尺寸作为绘制的边界,也就是父容器的宽高。

// 模糊进度条(会执行一个动画)
LinearProgressIndicator(backgroundColor: Colors.grey[200],valueColor: AlwaysStoppedAnimation(Colors.blue),
),// 进度条显示50%
LinearProgressIndicator(backgroundColor: Colors.grey[200],valueColor: AlwaysStoppedAnimation(Colors.blue),value: .5, 
)

7-2. 环形CircularProgressIndicator

CircularProgressIndicator 是一个环形进度条,它显示一个进度条,可以显示当前的进度和总进度。没有提供尺寸参数,都是取父容器的尺寸作为绘制的边界,也就是父容器的宽高。

// 模糊进度条(会执行一个旋转动画)
CircularProgressIndicator(backgroundColor: Colors.grey[200],valueColor: AlwaysStoppedAnimation(Colors.blue),
),// 进度条显示50%,会显示一个半圆
CircularProgressIndicator(backgroundColor: Colors.grey[200],valueColor: AlwaysStoppedAnimation(Colors.blue),value: .5,
),

本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~

往期文章

  • 手把手教你搭建规范的团队vue项目,包含commitlint,eslint,prettier,husky,commitizen等等
  • Web Woeker和Shared Worker的使用以及案例
  • Vue2全家桶+Element搭建的PC端在线音乐网站
  • vue3+element-plus配置cdn
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
  • 超详细!Vue-Router手把手教程

个人主页

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

亿欧网首届“元创·灵镜”科技艺术节精彩纷呈,实在智能AI Agent智能体展现硬核科技图景

12月4日-10日&#xff0c;持续一周的首届“元创灵镜”科技艺术节在海南陵水香水湾拉开帷幕&#xff0c;虚实交互创造出的“海岛之镜”开幕式呈现出既真实又虚幻的未来感&#xff0c;融入前沿科技元素的艺术装置作品在“虚实之镜&自然生长”科技艺术展诠释着浪漫想象&#x…

linux提取文档第一列内容,删除重复行,统计文件行数

linux shell命令awk 提取文档第一列内容_awk取第一列-CSDN博客 Linux使用awk去掉重复值的几种情况_awk去重复值-CSDN博客 linux 统计文件行数_linux 统计文件行数 命令-CSDN博客 linux shell命令awk提取文档第一列内容 awk {print $1} ../OG0000006.out.blastp.tab > OG00…

C# WPF上位机开发(树形控件在地图软件中的应用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们聊过图形软件的开发方法。实际上&#xff0c;对于绘制的图形&#xff0c;我们一般还会用树形控件管理一下。举个例子&#xff0c;一个地图…

功率信号源可以用在工业哪些产品上

功率信号源是一种关键的工业设备&#xff0c;其在各种产品和系统中发挥着至关重要的作用。这些信号源产生电信号&#xff0c;用于测试、校准、仿真和驱动各种工业设备。以下是功率信号源在工业中广泛应用的一些方面。 1.电源测试和校准 功率信号源常用于测试和校准电源系统。在…

pytorch之torch.utils.data学习

1、概述 PyTorch 数据加载利用的核心是torch.utils.data.DataLoader类 。它表示在数据集上 Python 可迭代&#xff0c;支持 map-style and iterable-style datasets&#xff08;地图样式和可迭代样式数据集&#xff09;&#xff0c; customizing data loading order&#xff…

css/less/scss代码注意事项

一.命名 1.类名使用小写字母&#xff0c;以中划线分割;id 使用 驼峰式命名; 2.less/scss中的函数、混合采用驼峰命名; 3. class 的命名不要使用 标签名,如.p .div .img; 二.选择器 尽量使用直接子选择器&#xff0c;否则&#xff0c;有时会造成性能损耗 .content .title { .…

【Spark精讲】Spark存储原理

目录 类比HDFS的存储架构 Spark的存储架构 存储级别 RDD的持久化机制 RDD缓存的过程 Block淘汰和落盘 类比HDFS的存储架构 HDFS集群有两类节点以管理节点-工作节点模式运行&#xff0c;即一个NameNode(管理节点)和多个DataNode(工作节点)。 Namenode管理文件系统的命名空…

JFlash烧写单片机bin/hex文件

1&#xff0c;安装压 JLink_Windows_V660c&#xff0c;官网可下载&#xff1b; 2&#xff0c;打开刚刚安装的 J-Flash V6.60c 选择创建新工程“Create a new project”&#xff0c;然后点击StartJ-Flash 点击之后跳出Select device框&#xff0c;选择TI 选择TI后&#xff0c…

TypeScript入门实战笔记 -- 04 什么是字面量类型、类型推断、类型拓宽和类型缩小?

&#x1f34d;开发环境 1&#xff1a;使用vscode 新建一个 04.Literal.ts 文件&#xff0c;运行下列示例。 2&#xff1a;执行 tsc 04.Literal.ts --strict --alwaysStrict false --watch 3&#xff1a;安装nodemon( 全局安装npm install -g nodemon ) 检测.js文件变化重启项…

谈谈数据归一化与标准化

背景&#xff1a; 归一化&#xff08;Normalization&#xff09;和标准化&#xff08;Standardization&#xff09;是常用的数据预处理技术&#xff0c;用于将不同范围或不同单位的特征值转换为统一的尺度&#xff0c;以便更好地进行数据分析和模型训练。一句话&#xff1a;消…

Go EASY游戏框架 之 RPC Guide 03

1 Overview easy解决服务端通信问题&#xff0c;同样使用了RPC技术。easy使用的ETCDGRPC&#xff0c;直接将它们打包组合在了一起。随着服务发现的成熟&#xff0c;稳定&#xff0c;简单&#xff0c;若是不用&#xff0c;甚至你也并不需要RPC来分解你的架构。 GRPC 有默认res…

银河麒麟重置密码

桌面版银河麒麟重置密码 1.选择界面按e 出现银河麒麟系统选择的页面&#xff0c;我们点击键盘上的“e”键&#xff0c;进入电脑启动项编辑页 2.编辑启动页 在启动项编辑页面&#xff0c;我们将光标移动到linux这一行的最后&#xff0c;然后输入“init/bin/bash consoletty0”…

给一个容器添加el-popover/el-tooltip内容提示框

效果&#xff1a; html: <div class"evaluate"><div class"list flex-column-center" v-for"(item, index) in evaluateList" :key"index"mouseenter"mouseenterHandler(item)" mouseleave"mouseleaveHandle…

【Vue第5章】vuex_Vue2

目录 5.1 理解vuex 5.1.1 vuex是什么 5.1.2 什么时候使用vuex 5.1.3 案例 5.1.4 vuex工作原理图 5.2 vuex核心概念和API 5.2.1 state 5.2.2 actions 5.2.3 mutations 5.2.4 getters 5.2.5 modules 5.3 笔记与代码 5.3.1 笔记 5.3.2 23_src_求和案例_纯vue版 5.3…

什么是跨站脚本攻击(XSS)?如何防止它?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

【面试】数据库—优化—聚簇索引和非聚簇索引、回表查询

数据库—优化—聚簇索引和非聚簇索引、回表查询 1. 什么是聚簇索引什么是非聚簇索引 ? 聚集索引选取规则: 如果存在主键&#xff0c;主键索引就是聚集索引&#xff1b;如果不存在主键&#xff0c;将使用第一个唯一&#xff08;UNIQUE&#xff09;索引作为聚集索引&#xff1b…

【移动通讯】【MIMO】[P1]【科普篇】

前言&#xff1a; 前面几个月把CA 的技术总体复盘了一下,下面一段时间 主要结合各国一些MIMO 技术的文档,复盘一下MIMO. 这篇主要参考华为&#xff1a; info.support.huawei.com MIMO 技术使用多天线发送和接受信号。主要应用在WIFI 手机通讯等领域. 这种技术提高了系统容量&…

python 内存泄露

Python的内存泄漏问题主要是由于以下几个原因导致的&#xff1a; 循环引用&#xff1a;当两个或多个对象相互引用&#xff0c;并且没有其他引用指向这些对象时&#xff0c;即使这些对象不再被使用&#xff0c;Python也无法释放它们的内存空间&#xff0c;从而造成内存泄漏。大…

MySQL和Redis有什么区别?

目录 一、什么是MySQL 二、什么是Redis 三、MySQL和Redis的区别 一、什么是MySQL MySQL是一种开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它是最流行的数据库之一。MySQL以其高性能、可靠性和易用性而闻名&#xff0c;广泛应用于各种Web应用程序…

ACM-MM2023 DITN详解:一个部署友好的超分Transformer

目录 1. Introduction2. Method2.1. Overview2.2. UFONE2.3 真实场景下的部署优化 3. 结果 Paper: Unfolding Once is Enough: A Deployment-Friendly Transformer Unit for Super-Resolution Code: https://github.com/yongliuy/DITN 1. Introduction CNN做超分的缺点 由于卷…