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

Flutter系列文章-Flutter进阶

在前两篇文章中,我们已经了解了Flutter的基础知识,包括Flutter的设计理念、框架结构、Widget系统、基础Widgets以及布局。在本文中,我们将进一步探讨Flutter的高级主题,包括处理用户交互、创建动画、访问网络数据等等。为了更好地理解这些概念,我们将通过实际的示例代码来详细讲解。

一、处理用户交互

在移动应用中,用户交互是非常重要的一部分。Flutter提供了丰富的Widgets来处理用户的触摸、点击和手势等交互事件。

1. 手势识别

Flutter提供了GestureDetector Widget来识别各种手势,例如点击、长按、双击等。下面是一个简单的示例,演示如何在点击按钮时改变文本内容:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: TapExample(),);}
}class TapExample extends StatefulWidget {@override_TapExampleState createState() => _TapExampleState();
}class _TapExampleState extends State<TapExample> {String _text = 'Click the button';void _handleTap() {setState(() {_text = 'Button Clicked';});}@overrideWidget build(BuildContext context) {return GestureDetector(onTap: _handleTap,child: Container(padding: EdgeInsets.all(12),color: Colors.blue,child: Text(_text,style: TextStyle(color: Colors.white,fontSize: 18,),),),);}
}

在上述代码中,我们使用GestureDetector包装了一个Container,当用户点击Container时,_handleTap函数会被调用,文本内容会改变为’Button Clicked’。

2. 拖动手势

Flutter也支持拖动手势,你可以使用Draggable和DragTarget来实现拖放操作。下面是一个简单的示例,演示如何将一个小方块从一个容器拖动到另一个容器:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: DragExample(),);}
}class DragExample extends StatefulWidget {@override_DragExampleState createState() => _DragExampleState();
}class _DragExampleState extends State<DragExample> {bool _dragging = false;Offset _position = Offset(0, 0);void _handleDrag(DragUpdateDetails details) {setState(() {_position = _position + details.delta;});}void _handleDragStart() {setState(() {_dragging = true;});}void _handleDragEnd() {setState(() {_dragging = false;});}@overrideWidget build(BuildContext context) {return Stack(children: [Positioned(left: _position.dx,top: _position.dy,child: Draggable(onDragStarted: _handleDragStart,onDragEnd: (_) => _handleDragEnd(), // 修改为不带参数的形式onDragUpdate: _handleDrag,child: Container(width: 100,height: 100,color: Colors.blue,),feedback: Container(width: 100,height: 100,color: Colors.blue.withOpacity(0.5),),childWhenDragging: Container(),),),Center(child: DragTarget(onAccept: (value) {setState(() {_position = Offset(0, 0);});},builder: (context, candidates, rejected) {return Container(width: 200,height: 200,color: Colors.grey,);},),),],);}
}

在上述代码中,我们使用Draggable将一个蓝色的小方块包装起来,并将其拖动到DragTarget中,当拖动结束时,小方块会返回DragTarget的中心。

二、创建动画

Flutter提供了强大的动画支持,你可以使用AnimationController和Tween来创建各种动画效果。下面是一个简单的示例,演示如何使用AnimationController和Tween来实现一个颜色渐变动画:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: ColorTweenExample(),);}
}class ColorTweenExample extends StatefulWidget {@override_ColorTweenExampleState createState() => _ColorTweenExampleState();
}class _ColorTweenExampleState extends State<ColorTweenExample>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<Color?> _animation;@overridevoid initState() {super.initState();_controller = AnimationController(vsync: this,duration: Duration(seconds: 2),);_animation = ColorTween(begin: Colors.blue, end: Colors.red).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));_controller.repeat(reverse: true);}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('ColorTween Example'),),body: Center(child: AnimatedBuilder(animation: _animation,builder: (context, child) {return Container(width: 200,height: 200,color: _animation.value,);},),),);}
}

在上述代码中,我们使用AnimationController和ColorTween来创建一个颜色渐变动画,将蓝色的容器逐渐变为红色。

三、访问网络数据

在现代应用中,访问网络数据是很常见的需求。Flutter提供了http包来处理网络请求。下面是一个简单的示例,演示如何使用http包来获取JSON数据并显示在ListView中:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: HttpExample(),);}
}class HttpExample extends StatefulWidget {@override_HttpExampleState createState() => _HttpExampleState();
}class _HttpExampleState extends State<HttpExample> {List<dynamic> _data = [];@overridevoid initState() {super.initState();_getData();}Future<void> _getData() async {final response =await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));if (response.statusCode == 200) {setState(() {_data = json.decode(response.body);});}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('HTTP Example'),),body: ListView.builder(itemCount: _data.length,itemBuilder: (context, index) {return ListTile(title: Text(_data[index]['title']),subtitle: Text(_data[index]['body']),);},),);}
}

在上述代码中,我们使用http包来获取JSON数据,并将数据解析后显示在ListView中。

结束语

通过本文的学习,你已经了解了Flutter的高级主题,包括处理用户交互、创建动画以及访问网络数据等。这些知识将帮助你更深入地掌握Flutter的开发能力,为你的应用添加更多功能和交互体验。希望本文对你的Flutter学习之旅有所帮助,祝你在Flutter的世界中取得更多成功!

相关文章:

Flutter系列文章-Flutter进阶

在前两篇文章中&#xff0c;我们已经了解了Flutter的基础知识&#xff0c;包括Flutter的设计理念、框架结构、Widget系统、基础Widgets以及布局。在本文中&#xff0c;我们将进一步探讨Flutter的高级主题&#xff0c;包括处理用户交互、创建动画、访问网络数据等等。为了更好地…...

【C++】C++11右值引用|新增默认成员函数|可变参数模版|lambda表达式

文章目录 1. 右值引用和移动语义1.1 左值引用和右值引用1.2 左值引用和右值引用的比较1.3右值引用的使用场景和意义1.4 左值引用和右值引用的深入使用场景分析1.5 完美转发1.5.1 万能引用1.5.2 完美转发 2. 新的类功能2.1 默认成员函数2.2 类成员变量初始化2.3 强制生成默认函数…...

rust学习-线程

Rust 标准库只提供了 1:1 线程模型 Rust 是较为底层的语言&#xff0c;如果愿意牺牲性能来换取抽象&#xff0c;以获得对线程运行更精细的控制及更低的上下文切换成本&#xff0c;使用实现了 M:N 线程模型的 crate 示例 use std::thread; use std::time::Duration;fn main() …...

题目:2180.统计各位数字之和为偶数的整数个数

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2180. 统计各位数字之和为偶数的整数个数 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 暴力遍历即可。 解题代码&#xff1a; class Solution {public int countEven(int num) {int re…...

3dsmax制作一个机器人

文章目录 建模身子&#xff1a;眼睛&#xff1a;头饰&#xff1a;肩膀手臂腿调整细节 渲染导出objMarmoset Toolbag 3.08渲染给眼睛添加材质&#xff0c;设置为自发光添加背景灯光 建模 身子&#xff1a; 眼睛&#xff1a; 头饰&#xff1a; 肩膀 手臂 腿 调整细节 渲染 导出…...

C++的类型转换运算符:reinterpret_cast

C的类型转换运算符&#xff1a;reinterpret_cast reinterpret_cast 是 C 中与 C 风格类型转换最接近的类型转换运算符。它让程序员能够将一种对象类型转换为另一种&#xff0c;不管它们是否相关&#xff1b;也就是说&#xff0c;它使用如下所示的语法强制重新解释类型&#xf…...

flask中的cookies介绍

flask中的cookies介绍 “Cookie” 在 web 开发中是一种非常重要的技术&#xff0c;用于在客户端&#xff08;即用户的浏览器&#xff09;存储信息&#xff0c;以便在多个页面和多个访问会话之间保持状态。Cookies 通常用于记住用户的登录信息&#xff0c;跟踪用户在站点上的浏…...

adnroid 11. 0 Activity启动流程图解

从Launcher到ActivityTaskManager 从ActivityTaskManagerService 到 ApplicationThread 从ApplicationThread到onCreate...

了解Unity编辑器之组件篇Physics(四)

Physics&#xff1a;用于处理物理仿真和碰撞检测。它提供了一组功能强大的工具和算法&#xff0c;用于模拟真实世界中的物理行为&#xff0c;使游戏或应用程序更加真实和可信。 主要用途包括&#xff1a; 碰撞检测&#xff1a;Unity Physics 提供了高效的碰撞检测算法&#x…...

“数字中华 点亮未来”中华线上客户节 盛大开幕

2023年是中华保险数字化转型落地之年&#xff0c;峥嵘37载&#xff0c;中华保险在数字化转型上已经涌现了一批彰显辨识度、具有影响力的应用成果。7月15日&#xff0c;中华保险围绕数字化转型之路开展以“数字中华 点亮未来”为主题的37周年线上客户节活动&#xff0c;倾力打造…...

中文分词入门:使用IK分词器进行文本分词(附Java代码示例)

1. 介绍 中文分词是将连续的中文文本切分成一个个独立的词语的过程&#xff0c;是中文文本处理的基础。IK分词器是一个高效准确的中文分词工具&#xff0c;采用了"正向最大匹配"算法&#xff0c;并提供了丰富的功能和可定制选项。 2. IK分词器的特点 细粒度和颗粒…...

CTFSHOW web 信息收集

web入门的刷题 web1 教我们多看看源代码 web2 抓包 web3 抓包 web4 robots.txt robots.txt web5 phps源代码泄露 phps 就是php的源代码 用户无法访问 php 只可以通过phps来访问 web6 源代码备份 web7 git web8 svn web9 swp /index.php.swp web10 cookie web11 查域名…...

速锐得开发社区-新一代汽车网络通信技术CAN FD的特点归纳

随着汽车工业的快速发展&#xff0c;汽车逐渐走向智能化&#xff0c;功能也越来越丰富&#xff0c;例如特斯拉、比亚迪、理想汽车为代表&#xff0c;在车载导航、驻车雷达、胎压监测、倒车影像、无钥匙启动、定速巡航、自动泊车、高级辅助驾驶系统、自动驾驶、域控制器、智能网…...

Android adb shell 查看App内存(java堆内存/vss虚拟内存/详细的内存状况/内存快照hprof)和系统可用内存

1.adb shell 获取app 进程的pid adb shell "ps|grep com.xxx包名"根据某个渠道包&#xff0c;去查询对应的pid&#xff0c;如下所示&#xff1a; 2.通过adb shell 查看设备的java dalvik 堆内存的最大值 执行命令行&#xff1a; adb shell getprop dalvik.vm.h…...

java篇 类的进阶0x0A:万类之祖:Object 类

文章目录 万类之祖&#xff1a;Object 类hashCode() 与 equals()hashCode() 方法equals() 方法 vs. equals()String 的 equals() 为什么要重写 hashCode 和 equals 方法重写&#xff08;覆盖&#xff09;前 hashCode() 和 equals() 的作用什么情况下需要重写&#xff08;覆盖&a…...

AVFoundation - 音频录制

文章目录 需要调用到麦克风方法,别忘记添加 Privacy - Microphone Usage Description @interface AudioRecorder ()<AVAudioRecorderDelegate>@property (strong, nonatomic) AVAudioRecorder *recorder;@end@implementation AudioRecorder- (void...

Jmeter+MySQL链接+JDBC Connection配置元件+使用

参考大大的博客学习&#xff1a;怎么用JMeter操作MySQL数据库&#xff1f;看完秒懂&#xff01;_jmeter mysql_程序员馨馨的博客-CSDN博客 注&#xff1a;里面所有没打码的都是假数据&#xff0c;麻烦大家自行修改正确的信息。 一、背景 需要取数据库中的值&#xff0c;作为…...

统一观测丨使用 Prometheus 监控 Cassandra 数据库最佳实践

作者&#xff1a;元格 本篇内容主要包括四部分&#xff1a;Cassandra 概览介绍、常见关键指标解读、常见告警规则解读、如何通过 Prometheus 建立相应监控体系。 Cassandra 简介 Cassandra 是什么&#xff1f; Apache Cassandra 是一个开源、分布式、去中心化、弹性可伸缩、…...

Hive视图

hive的视图 简介 hive的视图简单理解为逻辑上的表hive只支持逻辑视图&#xff0c;不支持物化视图视图存在的意义 对数据进行局部暴露&#xff08;涉及隐私的数据不暴露&#xff09;简化复杂查询 创建视图&#xff1a; create view if not exists v_1 as select uid,movie f…...

node中使用jsonwebtoken实现身份认证

在现代web应用中&#xff0c;用户身份认证是非常重要且必不可少的一环。而使用Node.js和Express框架&#xff0c;可以方便地实现用户身份认证。而在这个过程中&#xff0c;jsonwebtoken这个基于JWT协议的模块可以帮助我们实现安全且可靠的身份认证机制&#xff0c;可以让我们轻…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

VSCode 使用CMake 构建 Qt 5 窗口程序

首先,目录结构如下图: 运行效果: cmake -B build cmake --build build 运行: windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...