Flutter - 基础Widget

 Flutter 中万物皆 Widget，基础Widget 同步对应 Android View.

普通文本 Text

/*** 控制文本样式统一使用 style:TextStyle, 例：fontSize(字体大小),color(颜色),shadows(阴影)等等* 控制文本布局需单独设置：*  textAlign(文不对齐方式)*  textDirection(文不排版方向)*  maxLines(最大行数)*  overflow(文本截断规则)*/
class MyStatelessWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Text("赵钱孙李，周吴郑王。冯陈褚卫，蒋沈韩杨。朱秦尤许，何吕施张。孔曹严华，金魏陶姜。戚谢邹喻，柏水窦章。云苏潘葛，奚范彭郎。鲁韦昌马，苗凤花方。俞任袁柳，酆鲍史唐。",style: TextStyle(fontSize: 20,color: Colors.blueGrey,decoration: TextDecoration.none),maxLines: 3,overflow: TextOverflow.ellipsis,textAlign: TextAlign.center,);}
}

 按钮 Button

/*** Button* 最基础最常用：ElevatedButton,TextButton 和 OutlinedButton (Material Design的按钮)* 注：旧版的 FlatButton,RaisedButton,OutLineButton 已被上面控件取代* 还有显示图标IconButton 和 悬浮按钮FloatingActionButton* 最后用于弹出菜单的 PopupMenuButton** 主次操作：* ElevatedButton: 凸起的按钮，适合主要操作（如确认、提交）* TextButton: 文本按钮* OutlinedButton: 带边框的按钮** 图标类操作:* IconButton: 显示图标的按钮* FloatingActionButton: 悬浮按钮，用于突出核心操作*/
class MyStatelessWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Column(children: [ElevatedButton(onPressed: () {print("Click --- ElevatedButton");},child: Text("ElevatedButton")),TextButton(child: Text("TextButton",style: TextStyle(color: Colors.black87),),style: TextButton.styleFrom(backgroundColor: Colors.blue),// onHover: Colors.blue,onPressed: () {print("Click --- TextButton");},),OutlinedButton(onPressed: () {print("Click --- OutlinedButton");},child: Text("OutlinedButton")),IconButton(onPressed: () {print("Click --- IconButton");},icon: Icon(Icons.add)),FloatingActionButton(child: Text("悬浮按钮"),backgroundColor: Colors.teal,onPressed: () {print("Click --- FloatingActionButton");}),PopupMenuButton(itemBuilder: (context) => [PopupMenuItem(child: Text("选项1")),PopupMenuItem(child: Text("选项2")),PopupMenuItem(child: Text("选项3")),PopupMenuItem(child: Text("选项3")),]),],);}
}

图片 Image 

width、height：用于设置图片的宽、高，当不指定宽高时，图片会根据当前父容器的限制，
尽可能的显示其原始大小，如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放，
但可以通过下面介绍的 fit属性 来指定适应规则。fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。

加载网络图片

class MyStatelessWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: Image.network("https://img0.baidu.com/it/u=546698500,87821893&fm=253&fmt=auto&app=138&f=PNG?w=1008&h=500",alignment: Alignment.topCenter,// color: Colors.redAccent,// fit: BoxFit.cover,),width: 300,height: 250,color: Colors.yellow,),);}
}

加载本地图片

/*** 1 在项目根目录创建 assets 文件夹用于存放资源文件(可创建 images 用于区分资源)* 2 在 pubspec.yaml 进行配置* 3 Image.asset 使用图片*/
class MyStatelessWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: Image.asset("assets/images/aaa.png"),width: 300,height: 250,color: Colors.yellow,),);}
}

圆形头像

/*** 圆形头像（正圆）* 使用 CircleAvatar 组件，这是最简单的内置圆形头像组件* 加载网络图片：backgroundImage: NetworkImage(url)* 加载本地图片：backgroundImage: AssetImage("assets/images/aaa.png")*/
class MyStatelessWidget extends StatelessWidget {final imgUrl ="https://img0.baidu.com/it/u=2428089966,1135217866&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";@overrideWidget build(BuildContext context) {return Center(child: CircleAvatar(backgroundImage: NetworkImage(imgUrl),// 控制大小radius: 100,// 无背景色backgroundColor: Colors.transparent,));}
}
/*** 圆形头像（正圆）* 使用 ClipOval + Image,通过裁剪实现圆形，更灵活*/
class MyStatelessWidget extends StatelessWidget {final imgUrl ="https://img0.baidu.com/it/u=2428089966,1135217866&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";@overrideWidget build(BuildContext context) {return Center(child: ClipOval(child: Image.network(imgUrl,width: 140,height: 140,// 确保图片填充fit: BoxFit.cover),));}
}

表单 Widget

TextField

  • decoration：用于设置输入框相关的样式
  • icon：设置左边显示的图标
  • labelText：在输入框上面显示一个提示的文本
  • hintText：显示提示的占位文字
  • border：输入框的边框，默认底部有一个边框，可以通过InputBorder.none删除掉
  • filled：是否填充输入框，默认为false
  • fillColor：输入框填充的颜色
  • onChanged：监听输入框内容的改变，传入一个回调函数
  • onSubmitted：点击键盘中右下角的down时，会回调的一个函数
class TextFieldDemo extends StatefulWidget {@overrideState<TextFieldDemo> createState() => _TextFieldDemoState();
}class _TextFieldDemoState extends State<TextFieldDemo> {@overrideWidget build(BuildContext context) {return TextField(decoration: InputDecoration(icon: Icon(Icons.people),labelText: "Tel",hintText: "请输入手机号",border: InputBorder.none,filled: true,fillColor: Colors.teal),onChanged: (value){print("onChanged --- $value");},onSubmitted: (value){print("onSubmitted --- $value");},);}
}

I/flutter (31441): onChanged --- 1
I/flutter (31441): onChanged --- 11
I/flutter (31441): onChanged --- 110
I/flutter (31441): onSubmitted --- 1

Controller

/*** 需求：文本框默认输入“10”，*      当用户修改内容为“111”时，内容自动变更为“123”，且光标移动至最前*/
class TextFieldDemo extends StatefulWidget {@overrideState<TextFieldDemo> createState() => _TextFieldDemoState();
}class _TextFieldDemoState extends State<TextFieldDemo> {// TextEditingController 是一个控制器类，它提供了对 TextField 的更细粒度控制。final _controller = TextEditingController();@overridevoid initState() {super.initState();// 设置默认值_controller.text = "10";// 1 添加监听，可通过 TextEditingController.text 获取当前文本_controller.addListener((){// 2 读取 修改文本内容if(_controller.text == "111"){_controller.text = "123";// 3 控制光标位置_controller.selection = TextSelection.collapsed(offset: 0);}});}@overrideWidget build(BuildContext context) {return TextField(// 设置 Controllercontroller: _controller,decoration: InputDecoration(icon: Icon(Icons.people),labelText: "Tel",hintText: "请输入手机号",border: InputBorder.none,filled: true,fillColor: Colors.teal),);}@overridevoid dispose() {// 必须释放资源，防止内存泄漏_controller.dispose();super.dispose();}
}

Form组件

 点击登录时，同时获取 用户名 和 密码

class FormDemo extends StatefulWidget {const FormDemo({super.key});@overrideState<FormDemo> createState() => _FormDemoState();
}/*** 点击登录时，同时获取 用户名 和 密码* 通过绑定一个 GlobalKey 实现* 1 初始化 GlobalKey：首先定义一个 GlobalKey<FormState> 类型的变量 _formKey。这个变量将作为表单的唯一标识符。* 2 设置 GlobalKey：在 Form 的构造函数中，通过 key 参数将 _formKey 分配给 Form* 3 使用 GlobalKey 操作 Form*   validate()：验证所有包含 validator 回调的 TextFormField 是否都有效。*   save()：保存所有包含 onSaved 回调的 TextFormField 数据。*   reset()：重置所有 TextFormField 到初始状态，清除错误提示等。*/
class _FormDemoState extends State<FormDemo> {final _formKey = GlobalKey<FormState>();String user = "";String pwd = "";void loginForm() {_formKey.currentState?.save();print("user:$user pwd:$pwd");}@overrideWidget build(BuildContext context) {return Form(key: _formKey,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [TextFormField(decoration: InputDecoration(icon: Icon(Icons.people), labelText: "用户名或手机号"),onSaved: (value) {user = value.toString();},),TextFormField(obscureText: true,decoration:InputDecoration(icon: Icon(Icons.lock), labelText: "密码"),onSaved: (value) {pwd = value.toString();},),SizedBox(height: 16,),Container(width: double.infinity,height: 48,child: TextButton(style: TextButton.styleFrom(backgroundColor: Colors.teal),child: Text("登 录",style: TextStyle(fontSize: 16, color: Colors.black87),),onPressed: () {loginForm();},),)],));}
}

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

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

相关文章

蓝桥杯之日期题

蓝桥杯之日期题

文章目录 1.蓝桥杯必备知识点2. 题型13.需求2 1.蓝桥杯必备知识点 蓝桥杯是一个面向全国高校计算机相关专业学生的学科竞赛&#xff0c;涵盖多个赛道&#xff0c;常见的有软件类&#xff08;如 C/C 程序设计、Java 软件开发、Python 程序设计&#xff09;和电子类&#xff08;…
阅读更多...
本地部署大模型： LM Studio、Open WebUI 与 Chatbox 全面对比以及选型指南

本地部署大模型： LM Studio、Open WebUI 与 Chatbox 全面对比以及选型指南

1. 工具概述 LM Studio 定位&#xff1a;专注于本地化大模型实验与推理的桌面工具&#xff0c;支持多模型并行、Hugging Face集成及离线运行。 核心功能&#xff1a; 图形化界面直接加载GGUF模型文件&#xff0c;支持NVIDIA/AMD GPU加速。 内置OpenAI兼容API&#xff0c;可搭…
阅读更多...
springboot实现多文件上传

springboot实现多文件上传

springboot实现多文件上传 代码 package com.sh.system.controller;import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.PostMap…
阅读更多...
最新版IDEA下载安装教程

最新版IDEA下载安装教程

一、下载IDEA 点击前往官网下载 或者去网盘下载 点击前往百度网盘下载 点击前往夸克网盘下载 进去后点击IDEA 然后点击Download 选择自己电脑对应的系统 点击下载 等待下载即可 二、安装IDEA 下载好后双击应用程序 点击下一步 选择好安装目录后点击下一步 勾选这两项后点击…
阅读更多...
vue3学习2

vue3学习2

ts定义接口&#xff1a; 引入的时候要加type&#xff1a; 调用&#xff1a; ts创建自定义type类型&#xff0c;引入的时候也要加type&#xff1a; reactive可以直接传泛型&#xff1a; 加?声明不强制&#xff1a; defineProps接收父组件传递的props&#xff0c;其中defineProp…
阅读更多...
Proof Beyond Boundaries: Hong Kong zkNight 活动精彩回顾

Proof Beyond Boundaries: Hong Kong zkNight 活动精彩回顾

2 月 19 日&#xff0c;随着夜幕的降临&#xff0c;一场汇聚行业智慧与前瞻视野的高端主题活动 ——Proof Beyond Boundaries: Hong Kong zkNight&#xff0c;在香港铜锣湾 Vpoint 的 6/F 盛大启幕。本次活动由 ZEROBASE 主办&#xff0c;Techub News 承办&#xff0c;吸引了众…
阅读更多...
PDF转HTML 超级好用 免费在线转换PDF 完美转换格式

PDF转HTML 超级好用 免费在线转换PDF 完美转换格式

PDF转HTML 超级好用 免费在线转换PDF 完美转换格式&#xff0c;PDF已成为一种广泛使用的文件格式&#xff0c;用于保存和分享文档。然而&#xff0c;PDF文件在某些场景下可能不够灵活&#xff0c;特别是在需要在网页上直接展示其内容时。为了满足这一需求&#xff0c;小白工具推…
阅读更多...
星环科技推出DeepSeek全场景解决方案：即开即用、企业级部署、端侧智能三位一体

星环科技推出DeepSeek全场景解决方案：即开即用、企业级部署、端侧智能三位一体

星环科技&#xff08;688031.SH&#xff09;正式发布DeepSeek全场景解决方案&#xff0c;全面覆盖个人用户、企业客户及行业场景需求&#xff0c;为用户提供从个人到企业、从云端到本地的全方位AI应用支持&#xff0c;为不同需求的用户提供了灵活、高效且安全的AI解决方案。 省…
阅读更多...
全价值链数字化转型：以美的集团为例，探索开源AI大模型与S2B2C商城小程序源码的融合应用

全价值链数字化转型：以美的集团为例，探索开源AI大模型与S2B2C商城小程序源码的融合应用

摘要&#xff1a;在数字经济时代背景下&#xff0c;企业面临着前所未有的竞争压力与市场变革。全价值链的数字化转型&#xff0c;作为提升企业核心竞争力的关键策略&#xff0c;正逐步成为行业共识。美的集团&#xff0c;作为家电行业的领军企业&#xff0c;其基于数字化的全价…
阅读更多...
Hi3516CV610开发板ISP调试之——图像ISP在线调试 环境搭建教程

Hi3516CV610开发板ISP调试之——图像ISP在线调试 环境搭建教程

本文讲解Hi3516CV610开发板如何实时在线调试图像ISP参数 首先烧录好资料包中的出厂固件&#xff08;默认出厂已烧录好&#xff09;&#xff0c;接好网线、usb转串口线、电源&#xff0c;进入开发板系统 打开odm查看实时视频 解压打开资料包中的PQTools_V1.x.xx.zip并找到PQTool…
阅读更多...
isaac gym使用记录

isaac gym使用记录

一、使用测试 这里跑的是isaac gym官方的强化学习环境代码isaacgymenvs 下载链接&#xff1a;https://zhuanlan.zhihu.com/p/671309384 1、 运行命令和效果 训练命令 python train.py taskCartpole #headlessTrue运行倒立摆任务&#xff0c;运行一会就可以收敛。headless设置…
阅读更多...
国科大——数据挖掘（0812课程）——课后作业

国科大——数据挖掘（0812课程）——课后作业

前沿&#xff1a; 此文章记录了2024年度秋季学期数据挖掘课程的三次课后作业&#xff0c;答案仅供参考。 第一次作业 1 假定数据仓库中包含4个维&#xff1a;date, product, vendor, location&#xff1b;和两个度量&#xff1a;sales_volume和sales_cost。 1&#xff09;画…
阅读更多...
基于SpringBoot的“古城景区管理系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“古城景区管理系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“古城景区管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统整体功能图 系统首页界面 系统注册界面 景…
阅读更多...
HarmonyOS Design 介绍

HarmonyOS Design 介绍

HarmonyOS Design 介绍 文章目录 HarmonyOS Design 介绍一、HarmonyOS Design 是什么&#xff1f;1. 设计系统&#xff08;Design System&#xff09;2. UI 框架的支持3. 设计工具和资源4. 开发指南5. 与其他设计系统的对比总结 二、HarmonyOS Design 特点 | 应用场景1. Harmon…
阅读更多...
面试题——简述Vue 3的服务器端渲染（SSR）是如何工作的？

面试题——简述Vue 3的服务器端渲染（SSR）是如何工作的？

面试题——简述Vue3的服务器端渲染&#xff08;SSR&#xff09;是如何工作的&#xff1f; 服务器端渲染&#xff08;SSR&#xff09;已经成为了一个热门话题。Vue 3&#xff0c;作为一款流行的前端框架&#xff0c;也提供了强大的SSR支持。那么&#xff0c;Vue 3的SSR究竟是如何…
阅读更多...
汽车零部件工厂如何通过ESD监控系统闸机提升产品质量

汽车零部件工厂如何通过ESD监控系统闸机提升产品质量

在汽车零部件工厂的生产过程中&#xff0c;静电带来的危害不容小觑。从精密的电子元件到复杂的机械部件&#xff0c;静电都可能成为影响产品质量的 “隐形杀手”。而 ESD 监控系统闸机的出现&#xff0c;为汽车零部件工厂解决静电问题、提升产品质量提供了关键的技术支持。 一、…
阅读更多...
AWQ和GPTQ量化的区别

AWQ和GPTQ量化的区别

一、前言 本地化部署deepseek时发现&#xff0c;如果是量化版的deepseek&#xff0c;会节约很多的内容&#xff0c;然后一般有两种量化技术&#xff0c;那么这两种量化技术有什么区别呢&#xff1f; 二、量化技术对比 在模型量化领域&#xff0c;AWQ 和 GPTQ 是两种不同的量…
阅读更多...
IDEA关闭SpringBoot程序后仍然占用端口的排查与解决

IDEA关闭SpringBoot程序后仍然占用端口的排查与解决

IDEA关闭SpringBoot程序后仍然占用端口的排查与解决 问题描述 在使用 IntelliJ IDEA 开发 Spring Boot 应用时&#xff0c;有时即使关闭了应用&#xff0c;程序仍然占用端口&#xff08;例如&#xff1a;4001 端口&#xff09;。这会导致重新启动应用时出现端口被占用的错误&a…
阅读更多...
数字IC后端设计实现OCC(On-chip Clock Controller)电路介绍及时钟树综合案例

数字IC后端设计实现OCC(On-chip Clock Controller)电路介绍及时钟树综合案例

数字IC后端时钟树综合专题&#xff08;OCC电路案例分享&#xff09; 复杂时钟设计时钟树综合(clock tree synthesis)常见20个典型案例 1、什么是OCC&#xff1f; 片上时钟控制器(On-chip Clock Controllers &#xff0c;OCC)&#xff0c;也称为扫描时钟控制器(Scan Clock Con…
阅读更多...
IP离线库助力破解网络反诈难题

IP离线库助力破解网络反诈难题

毫秒级响应识别异常访问 IP离线库集成全球全量IP地址的详细信息&#xff0c;包括地理地址查询、运营商、经纬度、代理识别等多种维度数据。例如&#xff1a; 当用户账号频繁从北京、越南等多地IP登录时&#xff0c;系统将自动触发风险预警&#xff1b; 检测到访问IP为已知机…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023