Flutter第三弹：常用的Widget

目标：

1）常用的Widget有哪些？有什么特征？

2）开发一个简单的登录页面。

一、Flutter常用Widget

对于Flutter来说，一切皆Widget.

常用的Widget，包括一些基础功能的Widget.

控件名称功能备注
Text文本小组件
Icon/IconButton
Row水平布局组件
Column竖直布局组件
Stack
Container容器小组件类似层叠式布局
EdgeInsets边框小组件用于设置padding
Padding内边距用于设置容器内边距
Scaffold脚手架小组件规划页面主要布局位置，包括AppBar，底部导航栏按钮，页面Body等
MaterialAppMaterial风格UI入口
AppBarMaterial风格AppBar

Flutter Widget列表 

https://flutter.cn/docs/reference/widgets

1.1 输入框 TextField

Flutter的输入框是常见的用户界面组件之一，用于接收用户的文本输入。对应的组件源码

text_field.dart

  • controller：控制输入框的文本内容，可以通过TextEditingController进行管理。
  • decoration：输入框的装饰，可以定义输入框的边框、背景、提示文本等样式。
  • obscureText：是否将输入内容隐藏，常用于密码输入框。
  • enabled：输入框是否可编辑。
  • maxLength：允许输入的最大字符数。
  • textInputAction：键盘操作按钮的类型，例如完成、继续等。
  • keyboardType：键盘的类型，如文本、数字、URL等。
  • onChanged：文本变化时的回调函数。
  • onSubmitted：用户提交输入时的回调函数。
  • focusNode：用于控制输入框的焦点获取和失去。
  • autofocus：是否自动获取焦点。
  • style：输入框文本的样式，如字体大小、颜色等。

1. controller属性

controller属性用于控制输入框的文本内容，可以通过TextEditingController进行管理。使用TextEditingController可以获取、设置和监听输入框的文本内容。

TextEditingController _textController = TextEditingController();TextField(controller: _textController,
);

通过_textController.text来获取或设置输入框中的文本内容。

2. decoration属性

decoration属性用于定义输入框的装饰，包括边框、背景、提示文本等样式。它使用InputDecoration类来配置输入框的外观。

TextField(decoration: InputDecoration(border: OutlineInputBorder(),filled: true,fillColor: Colors.grey[200],hintText: 'Enter your name',hintStyle: TextStyle(color: Colors.grey),prefixIcon: Icon(Icons.person),),
);

3. obscureText属性

obscureText属性用于指定输入框的文本是否应该被隐藏，常用于密码输入框。当设置为true时，输入的文本将以圆点或其他隐藏字符显示。掩码显示。

TextField(obscureText: true,
);

4. enabled属性-是否可编辑

enabled属性用于指定输入框是否可编辑。当设置为false时，输入框将变为只读状态，用户无法编辑其中的文本。

5. maxLength属性

maxLength属性用于限制输入框可输入的最大字符数。设置此属性后，用户将无法输入超过指定字符数的文本。

TextField(maxLength: 10,
);

6. textInputAction属性

textInputAction属性用于指定键盘操作按钮的类型，例如完成、继续等。它们用于控制键盘上右下角按钮的标签和功能。

TextField(textInputAction: TextInputAction.done,
);

7. keyboardType属性

keyboardType属性用于指定键盘的类型，例如文本、数字、URL等。根据需要选择适合的键盘类型，以提供更好的用户体验。

TextField(keyboardType: TextInputType.emailAddress,
);

8. onChanged和onSubmitted属性

onChanged和onSubmitted属性用于定义输入框文本变化和提交输入的回调函数。onChanged在输入框文本发生变化时被调用，而onSubmitted在用户提交输入时被调用。

TextField(onChanged: (value) {// 处理文本变化},onSubmitted: (value) {// 处理提交输入},
);

9. style属性

style属性用于定义输入框文本的样式，如字体大小、颜色等。

TextField(style: TextStyle(fontSize: 16.0,color: Colors.black,),
);

1.2 文本框 Text 

文本框是Flutter用于显示文本的小组件。

创建函数如下：

  const Text(String this.data, {Key? key,this.style,this.strutStyle,this.textAlign,this.textDirection,this.locale,this.softWrap,this.overflow,this.textScaleFactor,this.maxLines,this.semanticsLabel,this.textWidthBasis,this.textHeightBehavior,}) : assert(data != null,'A non-null String must be provided to a Text widget.',),textSpan = null,super(key: key);

创建函数存在一个非空必选参数String data，存储文本内容。其他是一些可选参数。

1. text属性

存储文本 

2. key属性 用于识别组件的唯一键。

3. style属性

 TextStyle对象，用于指定文本的样式，例如字体、颜色、大小等。常用的属性配置：

  • color: 文本颜色。
  • fontSize: 字体大小。
  • fontWeight: 字体粗细。
  • fontStyle: 字体样式，如斜体。
  • letterSpacing: 字母间距。
  • wordSpacing: 单词间距。
  • background: 文本背景颜色。
  • decoration: 文本修饰，如下划线、删除线等。
  • decorationColor: 文本修饰的颜色。
  • decorationStyle: 文本修饰的样式。
  • height: 行高。
  • textBaseline: 基线对齐方式。
  • shadows: 文本阴影效果。

4. textAlign属性

文本对齐方式，可以是左对齐（left）、右对齐（right）、居中对齐（center）或两端对齐（justify）。

5. textDirection属性

 文本方向，可以是从左到右（ltr）或从右到左（rtl）。

6. softWrap属性

softWrap是否自动换行，默认为true。

7. overflow属性

文本溢出处理方式，可以是省略号（ellipsis）、截断（clip）或折叠（fade）

8. maxLines属性

最大显示行数，超过部分将根据overflow属性进行处理。


9. textScaleFactor属性

文本缩放因子，用于调整文本大小的比例。


10. locale属性

 文本的本地化配置，用于支持多语言显示。


11. strutStyle属性

文本行高样式。


12. textWidthBasis属性

文本宽度计算基准，可以是parent（父容器宽度）或 longestLine（最长行宽度）。


13. textHeightBehavior属性

文本高度行为配置。

1.3 按钮 Button

常用的按钮分类

  • ElevatedButton: 凸起按钮，具有立体效果。
  • TextButton: 文本按钮，通常用于文字链接或简单的按钮。
  • OutlinedButton: 带边框的按钮，边框颜色可自定义。
  • IconButton: 图标按钮，使用图标作为按钮的内容。

1. onPressed属性

点击按钮时触发的回调函数

2. onLongPress属性

长按按钮时触发的回调函数

3. style属性

ButtonStyle对象，用于设置按钮的样式。常用属性如下：

  • backgroundColor：按钮的背景颜色。【常用】
  • foregroundColor：按钮的前景颜色，如文字颜色。【常用】
  • elevation：按钮的海拔高度，用于创建立体效果。
  • padding：按钮的内边距。【常用】
  • side：按钮的边框样式。
  • shape：按钮的形状。【常用】
  • minimumSize：按钮的最小尺寸。
  • alignment：按钮内容的对齐方式。
              ElevatedButton(onPressed: () {// 点击了按钮print("ElevatedButton pressed");},style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.blue),foregroundColor: MaterialStateProperty.all(Colors.white),padding: MaterialStateProperty.all(EdgeInsets.all(12.0)),),child: Text("登录",style: TextStyle(fontSize: 26.0,color: Colors.black,)),),

 

4. child属性

按钮的子组件，通常是一个Text或Icon等用于显示按钮内容的组件

5. onHighlightChanged属性

当按钮被按下或释放时触发的回调函数

6. focusNode属性

控制按钮的焦点状态

7. autofocus属性

是否自动获取焦点

8. clipBehavior属性

内容溢出时的裁剪行为

9. enableFeedback属性

是否为按钮点击提供音频和触觉反馈

二、开发简单的登录页面

登录页比较简单，用户名+密码+登录按钮。采用Material风格脚手架。

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', // 标题theme: ThemeData(// This is the theme of your application.//// Try running your application with "flutter run". You'll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// "hot reload" (press "r" in the console where you ran "flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).// Notice that the counter didn't reset back to zero; the application// is not restarted.primarySwatch: Colors.blue,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);// This widget is the home page of your application. It is stateful, meaning// that it has a State object (defined below) that contains fields that affect// how it looks.// This class is the configuration for the state. It holds the values (in this// case the title) provided by the parent (in this case the App widget) and// used by the build method of the State. Fields in a Widget subclass are// always marked "final".final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {int _counter = 0;// 文本内容String textToShow = 'I love Flutter!';// 创建焦点节点对象FocusNode _nameFocusNode = FocusNode();FocusNode _passwordFocusNode = FocusNode();// 记录焦点状态bool _nameHasFocus = false;bool _passwordHasFocus = false;/*** 动画控制器*/late AnimationController controller;/*** 角度动画*/late CurvedAnimation curve;void _incrementCounter() {setState(() {// This call to setState tells the Flutter framework that something has// changed in this State, which causes it to rerun the build method below// so that the display can reflect the updated values. If we changed// _counter without calling setState(), then the build method would not be// called again, and so nothing would appear to happen._counter++;// 更新文本内容if (_counter % 4 == 0) {textToShow = 'I Study Flutter now';} else if (_counter % 4 == 1) {textToShow = 'Flutter is so interesting';} else if (_counter % 4 == 2) {textToShow = 'I love it more';} else {textToShow = 'I learn it more funny';}});// 播放动画controller.forward();}/*** 监听输入框焦点变化，焦点变化时保存焦点状态*/void _nameFocusChange() {// 存储状态变化setState(() {_nameHasFocus = _nameFocusNode.hasFocus;});}/*** 监听输入框焦点变化，焦点变化时保存焦点状态*/void _passwdFocusChange() {// 存储状态变化setState(() {_passwordHasFocus = _passwordFocusNode.hasFocus;});}@overridevoid initState() {super.initState();controller = AnimationController(duration: const Duration(milliseconds: 2000),vsync: this,);curve = CurvedAnimation(parent: controller,curve: Curves.easeIn,);// 监听输入框焦点变化_nameFocusNode.addListener(_nameFocusChange);_passwordFocusNode.addListener(_passwdFocusChange);}@overridevoid dispose() {_nameFocusNode.removeListener(_nameFocusChange);_passwordFocusNode.removeListener(_passwdFocusChange);super.dispose();}@overrideWidget build(BuildContext context) {// This method is rerun every time setState is called, for instance as done// by the _incrementCounter method above.//// The Flutter framework has been optimized to make rerunning build methods// fast, so that you can just rebuild anything that needs updating rather// than having to individually change instances of widgets.return Scaffold(appBar: AppBar(// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text(widget.title),),body: Center(child: Padding(padding: EdgeInsets.all(12.0),child: Column(// Column is also a layout widget. It takes a list of children and// arranges them vertically. By default, it sizes itself to fit its// children horizontally, and tries to be as tall as its parent.//// Invoke "debug painting" (press "p" in the console, choose the// "Toggle Debug Paint" action from the Flutter Inspector in Android// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)// to see the wireframe for each widget.//// Column has various properties to control how it sizes itself and// how it positions its children. Here we use mainAxisAlignment to// center the children vertically; the main axis here is the vertical// axis because Columns are vertical (the cross axis would be// horizontal).mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('用户登录',style: TextStyle(fontSize: 25.0,color: Colors.black,fontWeight: FontWeight.w200),),SizedBox(height: 12.0),TextField(focusNode: _nameFocusNode,decoration: InputDecoration(filled: true,fillColor:_nameHasFocus ? Colors.lightBlue[100] : Colors.grey[200],border: OutlineInputBorder(),hintText: '请输入姓名',hintStyle: TextStyle(color: Colors.grey),prefixIcon: Icon(Icons.person),),),SizedBox(height: 12.0),TextField(focusNode: _passwordFocusNode,obscureText: true, // 定输入框的文本是否应该被隐藏，常用于密码输入框decoration: InputDecoration(filled: true,fillColor:_nameHasFocus ? Colors.lightBlue[100] : Colors.grey[200],border: OutlineInputBorder(),hintText: '请输入密码',hintStyle: TextStyle(color: Colors.grey),prefixIcon: Icon(Icons.lock),),),TextField(enabled: true,style: TextStyle(fontSize: 20.0, color: Colors.black,backgroundColor: Colors.cyan, // 文本输入颜色),),Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headline4,),// 新增一个自定义的Text(在State中存储)Text(textToShow),Center(child: FadeTransition(opacity: curve,child: const FlutterLogo(size: 100,),),),],),),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

参考文献：

Flutter速来系列6： Flutter同学 输入框TextField就算了，还整个表单？ - 掘金

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

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

相关文章

代码随想录day19（2）二叉树：二叉树的最大深度（leetcode104）

代码随想录day19（2）二叉树：二叉树的最大深度（leetcode104）

题目要求&#xff1a;求出二叉树的最大深度 思路&#xff1a;首先要区分二叉树的高度与深度。二叉树的高度是任一结点到叶子结点的距离&#xff0c;而二叉树的深度指的是任一节点到根节点的距离&#xff08;从1开始&#xff09;。所以求高度使用后序遍历&#xff08;从下往上&…
阅读更多...
【小白学机器学习9】自己纯手动计算验证，EXCEL的一元线性回归的各种参数值

【小白学机器学习9】自己纯手动计算验证，EXCEL的一元线性回归的各种参数值

目录 0 目标 1 构造模型 1.1 构造模型的思路 1.2 具体模型构造的EXCEL公式和过程 2 直接用EXCEL画图&#xff0c;然后生成趋势线的方式进行回归分析 2.1 先选择“观测值Y”的数据&#xff0c;用散点图或者折线图作图 2.2 然后添加趋势线和设置趋势线格式 2.3 生成趋…
阅读更多...
ttkefu如何更改头像

ttkefu如何更改头像

ttkefu头像如何更改&#xff1a; 第一种&#xff1a;可以直接点击头像-更改框就出来了
阅读更多...
C语言（指针）单元练习二

C语言（指针）单元练习二

1有以下程序&#xff1a; #include <stdio.h> void fun( int *a, int i, int j) { int t; if(i<j) { ta[i]; a[i]a[j]; a[j]t; fun(a,i,--j); } } main() { int a[]{1,2,3,4,5,6},i; fun(a,0,5); for(i0; i<6; i) printf("%d ",a[i]); retur…
阅读更多...
前后端交互理解 简易表白墙（servlet）

前后端交互理解 简易表白墙（servlet）

前后端交互理解 简易表白墙&#xff08;servlet&#xff09; 文章目录 前后端交互理解 简易表白墙&#xff08;servlet&#xff09;后端核心内容前后端交互接口约定后端代码展示 上期介绍过 Servlet API &#xff0c;本篇文章目的是借助 servlet 做出一个完整的网站。在一个网站…
阅读更多...
工作随记：oracle重建一张1T数据量的大表

工作随记：oracle重建一张1T数据量的大表

文章目录 一、删除测试表二、重命名旧表&#xff1a;三、验证&#xff1a;四、检查alert日志和昨天到今天的统计信息任务收集是否正常 一、删除测试表 #xshell登录用户hthis用户连接登录处理&#xff1a; sqlplus ht/"123456" sqlplus ht/"123456"10.8.5.…
阅读更多...
Docker 搭建 PaddleOCR

Docker 搭建 PaddleOCR

转自PaddleOCR docker模式 - 简书 目的: 公司要放弃第三方的ocr工具(日语),需要自己搭建训练一套,这篇是搭建 图片要标出文字的选取框 因为是日文所以ocr有专门的工具,只需要文字坐标就好如图 日文的账票需要加密一下 我得环境是 Ubuntu 22.04.1 LTS 1,下载代码 cd /hom…
阅读更多...
AI-线性回归模型

AI-线性回归模型

线性回归应用场景 房价预测&#xff0c;通过分析房地产市场的历史数据&#xff0c;如房屋大小、位置、建造年份等因素&#xff0c;线性回归可以帮助预测未来房价的走势。 销售额预测&#xff0c;企业可以利用线性回归模型来预测产品的销售额&#xff0c;这通常涉及到产品价格、…
阅读更多...
科研三维模型高精度三维扫描服务3d逆向测绘建模工业产品抄数设计

科研三维模型高精度三维扫描服务3d逆向测绘建模工业产品抄数设计

三维抄数技术在科研三维模型的应用已经日益广泛&#xff0c;其高精度、高效率的特点使得科研工作者能够更快速、更准确地获取和分析数据。这一技术的核心在于通过专业的三维扫描仪对实物进行高精度测量&#xff0c;再将这些数据转化为三维数字模型&#xff0c;为后续的研究提供…
阅读更多...
QT c++ 双精度数拆分和组合 Tool

QT c++ 双精度数拆分和组合 Tool

本文描述QT c的双精度数拆分和合并&#xff0c;即双精度浮点数拆为四个16位无符号整数以及将四个16位无符号整数组合为双精度浮点数。 开发平台&#xff1a;win10QT6.2.4 MSVC2019 64 bit 在本文的最好列出了代码和可执行文件打包下载链接&#xff08;可直接使用&#xff09;…
阅读更多...
Challenge 4 - OSCP A

Challenge 4 - OSCP A

文章目录 wp141142140143144145wp 141 dirsearch扫描发现db目录，访问后得到一个sql文件。 里面可以看到用户名和密码 INSERT INTO `admin` (`id`, `username`, `password`, `firstname`, `lastname`, `photo`, `created_on`) VALUES (1, nurhodelta, $2y$10$fCOiMky4n5hCJx…
阅读更多...
Mysql 死锁案例1-记录锁读写冲突

Mysql 死锁案例1-记录锁读写冲突

死锁复现 CREATE TABLE t (id int(11) NOT NULL,c int(11) DEFAULT NULL,d int(11) DEFAULT NULL,PRIMARY KEY (id),KEY c (c) ) ENGINEInnoDB DEFAULT CHARSETutf8;/*Data for the table t */insert into t(id,c,d) values (0,0,0),(5,5,5),(10,10,10) 事务1事务2T1 START…
阅读更多...
linux 模拟shell

linux 模拟shell

&#x1f493;博主CSDN主页:麻辣韭菜-CSDN博客&#x1f493;   ⏩专栏分类&#xff1a;http://t.csdnimg.cn/G90eI⏪   &#x1f69a;代码仓库:Linux: Linux日常代码练习&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Linux知识   &#x1f51d;&#x1f5…
阅读更多...
BUU [FBCTF2019]RCEService

BUU [FBCTF2019]RCEService

BUU [FBCTF2019]RCEService 开题&#xff0c;要求以json格式输入命令。 无任何信息泄露&#xff0c;源码如下&#xff1a; <?phpputenv(PATH/home/rceservice/jail);if (isset($_REQUEST[cmd])) {$json $_REQUEST[cmd];if (!is_string($json)) {echo Hacking attempt de…
阅读更多...
阿里云第一次面试记录

阿里云第一次面试记录

java多态&#xff1f; 多态表示一个对象具有多种的状态&#xff0c;具体表现为父类的引用指向子类的实例 Fu f Zi z(); 多态是同一个行为具有多个不同表现形式或形态的能力。 多态就是同一个接口&#xff0c;使用不同的实例而执行不同操作 特点&#xff1a; 对象类型和引用类型…
阅读更多...
Css基础——精灵图（sprites）和字体图标

Css基础——精灵图（sprites）和字体图标

1、精灵图 1.1、精灵图的由来 一个网页中往往会应用很多小的背景图像作为修饰&#xff0c;当网页中的图像过多时&#xff0c;服务器就会频繁地接收和发送 请求图片&#xff0c;造成服务器请求压力过大&#xff0c;这将大大降低页面的加载速度。 因此&#xff0c;为了有效地减…
阅读更多...
搭建Hadoop集群

搭建Hadoop集群

一、前言 虚拟机&#xff08;Virtual Machine&#xff09;指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统。在实体计算机中能够完成的工作在虚拟机中都能够实现。 虚拟机是在一些开发测试工作中常常需要用到的功能&#xff0c;常见的虚拟机…
阅读更多...
白话-MVCC如何工作

白话-MVCC如何工作

MySQL中的MVCC机制主要在以下情况下起作用&#xff1a; 使用支持MVCC的存储引擎&#xff1a;MVCC主要是MySQL的InnoDB存储引擎中实现并发控制的一种方式&#xff0c;只有当使用InnoDB作为表的存储引擎时&#xff0c;MVCC机制才会生效。 非串行化事务隔离级别&#xff1a;MVCC在…
阅读更多...
一文掌握mysql中的查询语句

一文掌握mysql中的查询语句

目录 1. 聚合查询1.1 聚合函数1.2 GROUP BY子句1.3 HAVING 2. 联合查询2.1 内连接2.2 外连接2.3 自连接2.4 子查询2.5 合并查询 1. 聚合查询 1.1 聚合函数 常见的统计总数、计算平局值等操作&#xff0c;可以使用聚合函数来实现&#xff0c;常见的聚合函数有&#xff1a; 函…
阅读更多...
读书笔记:＜＜上瘾＞＞

读书笔记:＜＜上瘾＞＞

上瘾的四个步骤: 第一个叫触发&#xff0c; 第二个叫行动 第三个叫多变的酬赏&#xff0c; 第四个叫投入 我们首先一定会提升用户的终身价值。一个用户用一次还是用一辈子&#xff0c;价值是完全不一样的。 第二个就是你能够获得这个完全不同的灵活收益。比如说像我们刚刚说的…
阅读更多...
最新文章

Copyright @ 2022~2023