当前位置: 首页 > news >正文

Flutter系列文章-Flutter UI进阶

在本篇文章中,我们将深入学习 Flutter UI 的进阶技巧,涵盖了布局原理、动画实现、自定义绘图和效果、以及 Material 和 Cupertino 组件库的使用。通过实例演示,你将更加了解如何创建复杂、令人印象深刻的用户界面。

第一部分:深入理解布局原理

1. 灵活运用 Row 和 Column

Row 和 Column 是常用的布局组件,但灵活地使用它们可以带来不同的布局效果。例如,使用 mainAxisAlignment 和 crossAxisAlignment 可以控制子组件在主轴和交叉轴上的对齐方式。

Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Container(width: 50, height: 50, color: Colors.red),Container(width: 50, height: 50, color: Colors.green),Container(width: 50, height: 50, color: Colors.blue),],
)

2. 弹性布局 Flex 和 Expanded

Flex 和 Expanded 可以用于实现弹性布局,让组件占据可用空间的比例。例如,下面的代码将一个蓝色容器占据两倍宽度的空间。

Row(children: [Container(width: 50, height: 50, color: Colors.red),Expanded(flex: 2,child: Container(height: 50, color: Colors.blue),),],
)

第二部分:动画和动效实现

1. 使用 AnimatedContainer

AnimatedContainer 可以实现在属性变化时自动产生过渡动画效果。例如,以下代码在点击时改变容器的宽度和颜色。

class AnimatedContainerExample extends StatefulWidget {@override_AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {double _width = 100;Color _color = Colors.blue;void _animateContainer() {setState(() {_width = _width == 100 ? 200 : 100;_color = _color == Colors.blue ? Colors.red : Colors.blue;});}@overrideWidget build(BuildContext context) {return GestureDetector(onTap: _animateContainer,child: AnimatedContainer(width: _width,height: 100,color: _color,duration: Duration(seconds: 1),curve: Curves.easeInOut,),);}
}

2. 使用 Hero 动画

Hero 动画可以在页面切换时产生平滑的过渡效果。在不同页面中使用相同的 tag,可以让两个页面之间的共享元素过渡更加自然。

class PageA extends StatelessWidget {@overrideWidget build(BuildContext context) {return GestureDetector(onTap: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => PageB(),));},child: Hero(tag: 'avatar',child: CircleAvatar(radius: 50,backgroundImage: AssetImage('assets/avatar.jpg'),),),);}
}class PageB extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Hero(tag: 'avatar',child: CircleAvatar(radius: 150,backgroundImage: AssetImage('assets/avatar.jpg'),),),),);}
}

第三部分:自定义绘图和效果

1. 使用 CustomPaint 绘制图形

CustomPaint 允许你自定义绘制各种图形和效果。以下是一个简单的例子,绘制一个带边框的矩形。

class CustomPaintExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return CustomPaint(painter: RectanglePainter(),child: Container(),);}
}class RectanglePainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {final paint = Paint()..color = Colors.blue..style = PaintingStyle.stroke..strokeWidth = 2;canvas.drawRect(Rect.fromLTWH(50, 50, 200, 100), paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return false;}
}

第四部分:Material 和 Cupertino 组件库

1. 使用 Material 组件

Material 组件库提供了一系列符合 Material Design 规范的 UI 组件。例如,AppBar、Button、Card 等。以下是一个使用 Card 的例子。

Card(elevation: 4,child: ListTile(leading: Icon(Icons.account_circle),title: Text('John Doe'),subtitle: Text('Software Engineer'),trailing: Icon(Icons.more_vert),),
)

2. 使用 Cupertino 组件

Cupertino 组件库提供了 iOS 风格的 UI 组件,适用于 Flutter 应用在 iOS 平台上的开发。例如,CupertinoNavigationBar、CupertinoButton 等。

dart
Copy code
CupertinoNavigationBar(
middle: Text(‘Cupertino Example’),
trailing: CupertinoButton(
child: Text(‘Done’),
onPressed: () {},
),
)

第五部分:综合实例

以下是一个更加综合的例子,涵盖了之前提到的布局、动画、自定义绘图和 Material/Cupertino 组件库的知识点。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: ExampleScreen(),);}
}class ExampleScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Advanced UI Example'),),body: Padding(padding: const EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [AnimatedRotateExample(),SizedBox(height: 20),CustomPaintExample(),SizedBox(height: 20),PlatformWidgetsExample(),],),),);}
}class AnimatedRotateExample extends StatefulWidget {@override_AnimatedRotateExampleState createState() => _AnimatedRotateExampleState();
}class _AnimatedRotateExampleState extends State<AnimatedRotateExample> {double _rotation = 0;void _startRotation() {Future.delayed(Duration(seconds: 1), () {setState(() {_rotation = 45;});});}@overrideWidget build(BuildContext context) {return Column(children: [GestureDetector(onTap: () {_startRotation();},child: AnimatedBuilder(animation: Tween<double>(begin: 0, end: _rotation).animate(CurvedAnimation(parent: ModalRoute.of(context)!.animation!,curve: Curves.easeInOut,),),builder: (context, child) {return Transform.rotate(angle: _rotation * 3.1416 / 180,child: child,);},child: Container(width: 100,height: 100,color: Colors.blue,child: Icon(Icons.star,color: Colors.white,),),),),Text('Tap to rotate'),],);}
}class CustomPaintExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return CustomPaint(painter: CirclePainter(),child: Container(width: 200,height: 200,alignment: Alignment.center,child: Text('Custom Paint',style: TextStyle(color: Colors.white, fontSize: 18),),),);}
}class CirclePainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {final center = Offset(size.width / 2, size.height / 2);final radius = size.width / 2;final paint = Paint()..color = Colors.orange..style = PaintingStyle.fill;canvas.drawCircle(center, radius, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) {return false;}
}class PlatformWidgetsExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return Column(children: [Material(elevation: 4,child: ListTile(leading: Icon(Icons.account_circle),title: Text('John Doe'),subtitle: Text('Software Engineer'),trailing: Icon(Icons.more_vert),),),SizedBox(height: 20),CupertinoButton.filled(child: Text('Explore'),onPressed: () {},),],);}
}

这个示例演示了一个综合性的界面,包括点击旋转动画、自定义绘图和 Material/Cupertino 组件。你可以在此基础上进一步扩展和修改,以满足更复杂的 UI 设计需求。

总结

在本篇文章中,我们深入学习了 Flutter UI 的进阶技巧。我们了解了布局原理、动画实现、自定义绘图和效果,以及 Material 和 Cupertino 组件库的使用。通过实例演示,你将能够更加自信地构建复杂、令人印象深刻的用户界面。

希望这篇文章能够帮助你在 Flutter UI 进阶方面取得更大的进展。如果你有任何问题或需要进一步的指导,请随时向我询问。祝你在 Flutter 开发的道路上取得成功!

相关文章:

Flutter系列文章-Flutter UI进阶

在本篇文章中&#xff0c;我们将深入学习 Flutter UI 的进阶技巧&#xff0c;涵盖了布局原理、动画实现、自定义绘图和效果、以及 Material 和 Cupertino 组件库的使用。通过实例演示&#xff0c;你将更加了解如何创建复杂、令人印象深刻的用户界面。 第一部分&#xff1a;深入…...

Elasticsearch在部署时,对Linux的设置有哪些优化方法?

部署Elasticsearch时&#xff0c;可以通过优化Linux系统的设置来提升性能和稳定性。以下是一些常见的优化方法&#xff1a; 1.文件描述符限制 Elasticsearch需要大量的文件描述符来处理数据和连接&#xff0c;所以确保调整系统的文件描述符限制。可以通过修改 /etc/security/…...

【网络基础】应用层协议

【网络基础】应用层协议 文章目录 【网络基础】应用层协议1、协议作用1.1 应用层需求1.2 协议分类 2、HTTP & HTTPS2.1 HTTP/HTTPS 简介2.2 HTTP工作原理2.3 HTTPS工作原理2.4 区别 3、URL3.1 编码解码3.2 URI & URL 4、HTTP 消息结构4.1 HTTP请求方法4.2 HTTP请求头信…...

面试八股文Mysql:(1)事务实现的原理

1. 什么是事务 事务就是一组数据库操作&#xff0c;这些操作是一个atomic&#xff08;原子性的操作&#xff09; &#xff0c;不可分割&#xff0c;要么都执行&#xff0c;要么回滚&#xff08;rollback&#xff09;都不执行。这样就避免了某个操作成功某个操作失败&#xff0…...

Linux学习之sed多行模式

N将下一行加入到模式空间 D删除模式空间中的第一个字符到第一个换行符 P打印模式空间中的第一个字符到第一个换行符 doubleSpace.txt里边的内容如下&#xff1a; goo d man使用下边的命令可以实现把上边对应的内容放到doubleSpace.txt。 echo goo >> doubleSpace.txt e…...

【刷题笔记8.15】【链表相关】LeetCode:合并两个有序链表、反转链表

LeetCode&#xff1a;【链表相关】合并两个有序链表 题目1&#xff1a;合并两个有序链表 题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3…...

神经网络基础-神经网络补充概念-11-向量化逻辑回归

概念 通过使用 NumPy 数组来进行矩阵运算&#xff0c;将循环操作向量化。 向量化的好处在于它可以同时处理多个样本&#xff0c;从而加速计算过程。在实际应用中&#xff0c;尤其是处理大规模数据集时&#xff0c;向量化可以显著提高代码的效率。 代码实现-以逻辑回归为例 i…...

openGauss学习笔记-40 openGauss 高级数据管理-锁

文章目录 openGauss学习笔记-40 openGauss 高级数据管理-锁40.1 语法格式40.2 参数说明40.3 示例 openGauss学习笔记-40 openGauss 高级数据管理-锁 如果需要保持数据库数据的一致性&#xff0c;可以使用LOCK TABLE来阻止其他用户修改表。 例如&#xff0c;一个应用需要保证表…...

勘探开发人工智能技术:机器学习(6)

0 提纲 7.1 循环神经网络RNN 7.2 LSTM 7.3 Transformer 7.4 U-Net 1 循环神经网络RNN 把上一时刻的输出作为下一时刻的输入之一. 1.1 全连接神经网络的缺点 现在的任务是要利用如下语料来给apple打标签&#xff1a; 第一句话&#xff1a;I like eating apple!(我喜欢吃苹…...

代理类型中的 HTTP、HTTPS 和 SOCKS 有什么区别?

HTTP、HTTPS 和 SOCKS 都是代理&#xff08;Proxy&#xff09;协议&#xff0c;用于在网络通信中转发请求和响应&#xff0c;但它们在工作原理和用途上有一些区别。下面是它们之间的主要区别&#xff1a; HTTP代理&#xff1a; 工作原理&#xff1a; HTTP 代理主要用于转发 HTT…...

【STM32RT-Thread零基础入门】 3. PIN设备(GPIO)的使用

硬件&#xff1a;STM32F103ZET6、ST-LINK、usb转串口工具、4个LED灯、1个蜂鸣器、4个1k电阻、2个按键、面包板、杜邦线 文章目录 前言一、PIN设备介绍1. 引脚编号获取2. 设置引脚的输入/输出模式3. 设置引脚的电平值4. 读取引脚的电平值5. 绑定引脚中断回调函数6. 脱离引脚中断…...

fiddler抓包工具的用法以及抓取手机报文定位bug

前言&#xff1a; fiddler抓包工具是日常测试中常用的一种bug定位工具 一 抓取https报文步骤 使用方法&#xff1a; 1 首先打开fiddler工具将证书导出 点击TOOLS------Options------Https-----Actions---选中第二个选项 2 把证书导出到桌面后 打开谷歌浏览器 设置---高级…...

spring中时间格式化的两种方式

方法一&#xff1a;自己格式化 自己写一个格式化的类&#xff0c;把date类型的时间传进去&#xff1a; public class DateUtil {public static String formatDate(Date date){SimpleDateFormat simpleDateFormatnew SimpleDateFormat("yyyy-MM-dd HH:mm:ss");retur…...

【设计模式】原型模式

原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式之一。 这种模式是实现了一个原型接口&#xff0c;该接口用于创建当前对象的克隆。当直接…...

Matlab的Filter Designer工具设计二阶低通滤波器

Matlab版本&#xff1a;2018b 本文要求&#xff1a;设计一个二阶巴特沃斯低通滤波器用于嵌入式软件滤波&#xff0c;传感器采样频率是20KHz&#xff0c;截止频率是333Hz&#xff0c;获取滤波系数&#xff0c;本文不包括二阶滤波推导和代码编写。 打开Matlab->APP->Filt…...

软件测试基础篇——LAMP环境搭建

LAMP 1、Linux系统的其他命令 find命令&#xff1a;在目录下查找文件 ​ 格式一&#xff1a;find 路径 参数 文件名 ​ 路径&#xff1a;如果没有指定路径&#xff0c;默认是在当前目录下 ​ 参数&#xff1a;-name 根据文件名来查找&#xff0c;区分大小写&#xff1b; -…...

使用dom4j将xml转为String并去掉所有格式

文章目录 功能描述实现代码 功能描述 有以下xml内容&#xff0c;需要转成String字符串。同时&#xff0c;要去掉文中所有格式。 <root><student><name>张三</name><sex>男</sex><age>16</age><class>1班</class>…...

wsl2安装docker引擎(Install Docker Engine on Debian)

安装 1.卸载旧版本 在安装 Docker 引擎之前&#xff0c;您必须首先确保卸载任何冲突的软件包。 发行版维护者在他们的存储库。必须先卸载这些软件包&#xff0c;然后才能安装 Docker 引擎的正式版本。 要卸载的非官方软件包是&#xff1a; docker.iodocker-composedocker-…...

百日筑基篇——python爬虫学习(一)

百日筑基篇——python爬虫学习&#xff08;一&#xff09; 文章目录 前言一、python爬虫介绍二、URL管理器三、所需基础模块的介绍1. requests2. BeautifulSoup1. HTML介绍2. 网页解析器 四、实操1. 代码展示2. 代码解释1. 将大文件划分为小的文件&#xff08;根据AA的ID数量划…...

【Spring专题】Spring之底层架构核心概念解析

目录 前言前置知识课程内容一、BeanDefinition&#xff1a;图纸二、BeanDefinitionReader&#xff1a;图纸注册器——Spring工厂基础设施之一2.1 AnnotatedBeanDefinitionReader2.2 XmlBeanDefinitionReader2.3 ClassPathBeanDefinitionScanner基本介绍总结使用示例 三、BeanFa…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...