Flutter技术学习

以下内容更适用于 不拘泥于教程学习,而是从简单项目入手的初学者。

在开始第一个项目之前,我们先要了解 两个概念。

Widget 和 属性

  • Widget 是用户界面的基本构建块,可以是任何 UI 元素。
  • 属性 是 widget 类中定义的变量,用于配置和定制 widget 的外观和行为。
  • 当你创建一个 widget 时,可以通过构造函数传递参数来设置这些属性,从而定制 widget 的表现。
  • Widget包含属性

UI 元素:Text、Image、Container、Column、AppBar 、布局等等

外观:颜色、大小、形状等等

行为:点击事件、动画、数据更新等等

vscode创建默认项目(这里默认前置工作都已经准备好了)

1. Hellow world

替换lib\main.dart

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}// 定义无状态组件
class MyApp extends StatelessWidget{const MyApp({super.key});@overrideWidget build(BuildContext context){return MaterialApp(// 初始标题title: 'Welcome to flutter',// 初始页面home: Scaffold(appBar: AppBar(title: const Text('Welcome to flutter'),),// 居中   一个子widgetbody: const Center(child: Text('Hellow World', // 字体样式style: TextStyle(// 字体颜色color: Colors.green,)),),// 垂直排列 多个子widget// body: Column(//   // 只能定义一个children属性 可包含 一个wedget或者wedget列表//   children: [//     const Text("Hello World"),//     Image.network("https://gd-hbimg.huaban.com/88b49ee5dc63c49f26d984a71ce061729f27070c3124c-jZyeMc_fw1200webp",fit: BoxFit.cover),//     const Center(//       child: Text("Hello world"),//     ),//   ],// ),),);}
}

flutter run 命令运行 

2. 使用依赖包(package) 

包管理:https://pub.dev/

 打开包管理网站 搜索 english_words 

替换lib\main.dart   终端运行  flutter packages get  获取依赖包 

import 'package:flutter/material.dart';
// 引入 英文单词 包
import 'package:english_words/english_words.dart';void main() {runApp(const MyApp());
}// 定义无状态组件
class MyApp extends StatelessWidget{const MyApp({super.key});@overrideWidget build(BuildContext context){return MaterialApp(// 初始标题title: 'Welcome to flutter',// 初始页面home: Scaffold(appBar: AppBar(title: const Text('Welcome to flutter'),),// 居中   一个子widgetbody: Center(child: Text(generateWordPairs().take(10).map((pair) => pair.asPascalCase).join('\n'), // 字体样式style: TextStyle(// 字体颜色color: Colors.green,)),),),);}
}

保存 终端 输入r  热重载运行 

3. 使用有状态的部件(Stateful widget) 

替换lib\main.dart

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}// 定义有状态组件class MyApp extends StatefulWidget{@override_MyAppState createState() => _MyAppState();}// 管理组件状态
class _MyAppState extends State<MyApp>{// 初始化变量int _counter = 0;// 定义一个方法void _incrementCounter(){// 触发组件更新setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return MaterialApp(title: '计数器',home: Scaffold(appBar: AppBar(title: const Text("计数器"),),body: Center(child: Text(// 状态改变时自动更新'你点击了 $_counter 次'),),// 浮动动作按钮floatingActionButton: FloatingActionButton(// 按钮被按下时调用 _incrementCounter方法onPressed: _incrementCounter,// 按钮的提示文本tooltip: "Increment",  // 按钮上的图标child: const Icon(Icons.add),),));}
}

保存 终端 输入r  热重载运行 

4. 创建一个无限滚动的 ListView  

替换lib\main.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';void main() => runApp(MyApp());// 无状态组件
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: '无限滚动列表',// 主页为 RandomWords 组件home: RandomWords(),);}
}// RandomWords 类  有状态组件
class RandomWords extends StatefulWidget {@override_RandomWordsState createState() => _RandomWordsState();
}//  _RandomWordsState 组件,是RandomWords的状态
class _RandomWordsState extends State<RandomWords> {//  final声明的变量,引用是不可变的,也就是不可重新赋值;内容是可变的,也就是可向列表内容添加或删除// 声明列表并指定集合中元素的类型为WordPairfinal _suggestions = <WordPair>[];// 常量 设置字体样式final _biggerFont = const TextStyle(fontSize: 18.0);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('无限滚动列表'),),//  body部分单独抽出,避免嵌套过多 body: _buildSuggestions(),);}Widget _buildSuggestions(){// 构建无限滚动列表。滑动时触发return ListView.builder(// 内边距padding: const EdgeInsets.all(16.0),// 回调函数,用于生成每个列表项itemBuilder: (context,i){print('当前索引:$i');// 如果是奇数 返回分割线if(i.isOdd) return const Divider();//  i 除以 2, 并向下取整final index = i ~/ 2;print('当前实际单词对数量:$index');if(index >= _suggestions.length){_suggestions.addAll(generateWordPairs().take(10));}print('列表内容:$_suggestions');return _buildRow(_suggestions[index]);});}Widget _buildRow(WordPair pair){return ListTile(title: Text(// 将两个单词组合成PascalCase 格式的字符串pair.asPascalCase,style: _biggerFont,),);}
}

保存 终端 输入r  热重载运行  

 

5. 添加交互

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

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

相关文章

【IEEE独立出版 | 厦门大学主办】第四届人工智能、机器人和通信国际会议(ICAIRC 2024)

【IEEE独立出版 | 厦门大学主办】 第四届人工智能、机器人和通信国际会议&#xff08;ICAIRC 2024&#xff09; 2024 4th International Conference on Artificial Intelligence, Robotics, and Communication 2024年12月27-29日 | 中国厦门 >>往届均已成功见刊检索…

深入理解Transformer的笔记记录(精简版本)NNLM → Word2Vec

文章的整体介绍顺序为&#xff1a; NNLM → Word2Vec → Seq2Seq → Seq2Seq with Attention → Transformer → Elmo → GPT → BERT 自然语言处理相关任务中要将自然语言交给机器学习中的算法来处理&#xff0c;通常需要将语言数学化&#xff0c;因为计算机机器只认数学符号…

Node.js管理工具NVM

nvm&#xff08;Node Version Manager&#xff09;是一个用于管理多个 Node.js 版本的工具。以下是 nvm 的使用方法和一些常见命令&#xff1a; 一、安装 nvm 下载 nvm&#xff1a; 地址&#xff1a;https://github.com/coreybutler/nvm-windows/releases访问 nvm 的 GitHub 仓…

稳字诀! 洞见 强者的社交格局:从不恋战——早读(逆天打工人爬取热门微信文章解读)

都是文字 引言Python 代码第一篇 洞见 强者的社交格局&#xff1a;从不恋战第二篇 稳字诀结尾 引言 今天很奇怪 一直都挺烦造的 好像有很多事情忙 但是就是忙着找不定 不能定下心来 主要还是在股市 其他方面应该没啥 计划表还是不够给力 没办法把心在约定住 稳字诀 勤燃香,奋…

GPT和BERT

GPT和BERT都是基于Trm的应用&#xff0c;可以理解为GPT是decoder的应用&#xff0c;BERT可以说是encoder的应用 GPT 如图&#xff0c;就是GPT的原理&#xff0c;GPT是做生成式的任务的&#xff0c;没有办法进行下游任务改造&#xff0c;训练也是针对生成式的任务进行训练 BE…

​微信小程序 页面间传递数据

在小程序中&#xff0c;给页面传递参数通常有以下几种方法&#xff1a; 通过URL传递参数&#xff1a; 在小程序中&#xff0c;可以在页面的路径后面添加参数&#xff0c;然后在页面的 onLoad 函数中获取这些参数。 // 在app.json中配置页面路径 "pages": [{"pat…

Spring Boot 核心理解-profile

在 Spring Boot 中&#xff0c;application.properties 和 application.yml 是用来管理应用程序配置的主要文件。为了方便在不同的环境&#xff08;如 dev、test、prod&#xff09;下进行配置管理&#xff0c;Spring Boot 提供了 Profile 的概念&#xff0c;这使得我们可以针对…

使用DeepKE训练命名实体识别模型DEMO(官方DEMO)

使用DeepKE训练命名实体识别模型DEMO&#xff08;官方DEMO&#xff09; 说明&#xff1a; 首次发表日期&#xff1a;2024-10-10DeepKE资源&#xff1a; 文档&#xff1a; https://www.zjukg.org/DeepKE/网站&#xff1a; http://deepke.zjukg.cn/cnschema&#xff1a; http:/…

云开发 | 微信小程序云开发无法获取数据库数据

1.我在我的云数据库中创建了一个数据表&#xff08;即collection数据集&#xff09;userList,并且存入了两条用户信息数据 2. 想要通过按钮触发事件拿取数据库中数据并且打印在控制台时&#xff0c;获取数据失败&#xff0c;控制台无输出 3. 初始化 | 在开始使用数据库 API 进…

“医者仁术”再进化,AI让乳腺癌筛查迎难而上

世卫组织最新数据显示&#xff0c;我国肿瘤疾病仍然呈上升趋势&#xff0c;肿瘤防控形势依然比较严峻。尤其是像乳腺癌等发病率较高的疾病&#xff0c;早诊断和早治疗意义重大&#xff0c;能够有效降低病死率。 另一方面&#xff0c;中国地域广阔且发展不平衡&#xff0c;各地…

Qt-界面优化盒子模型(71)

目录 描述 相关属性 使用 描述 盒子模型 例如下面房子模型 • Content 矩形区域: 存放控件内容.⽐如包含的⽂本/图标等. • Border 矩形区域: 控件的边框. • Padding 矩形区域: 内边距. 边框和内容之间的距离. • Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形…

Qt5.14.2 安装详细教程(图文版)

Qt 是一个跨平台的 C 应用程序开发框架&#xff0c;主要用于开发图形用户界面&#xff08;GUI&#xff09;程序&#xff0c;但也支持非 GUI 程序的开发。Qt 提供了丰富的功能库和工具&#xff0c;使开发者能够在不同平台上编写、编译和运行应用程序&#xff0c;而无需修改代码。…

sql server中字符串类型的日期如何比较大小

SQL Server 计算两个时间相差 案例&#xff1a;计算 标准结束时间 和 实际结束时间 之间的秒数差&#xff0c;并根据这个差值判断是否超时。 假设 test 表中有以下数据&#xff1a; 标准结束时间实际结束时间2024-10-12 10:00:002024-10-12 10:30:002024-10-12 11:00:00202…

【分布式微服务云原生】掌握Java分布式事务:2PC、3PC、TCC与Seata全解析

目录 掌握Java分布式事务&#xff1a;2PC、3PC、TCC与Seata全解析一、分布式事务的由来二、两阶段提交2PC1. **准备阶段&#xff08;投票阶段&#xff09;**2. **提交阶段**3.**优缺点**优点:缺点: 三、三阶段提交3PC1. 准备阶段&#xff08;Prepare Phase&#xff09;2. 预提交…

Flutter路由管理(二)

路由&#xff08;Route&#xff09;在移动开发中通常是指页面&#xff08;Page&#xff09;&#xff0c;这与Web开发的意义是相同的&#xff0c;Route在Andriod中通常指一个Activaty&#xff0c;在IOS中指一个ViewController&#xff0c;路由入栈&#xff08;push&#xff09;用…

原生小程序开发组件|地图组件汇总

map 基础库 2.0.12 开始支持, 低版本需做兼容处理。 依赖 MapKit 插件, 插件版本 > 2.2.2。 Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异&#xff0c;请以真机效果为主。 地图。相关 API&#xff1a;ty.createMapContext。这是基于异层渲染的原生组件, 请注意…

el-date-picker 自定义指令,输入数字自动转换显示yyyy-mm-dd格式

el-date-picker 自定义指令&#xff0c;输入数字显示yyyy-mm-dd格式 在main.js引入自定义指令direct.jsdirect.js公共部分时间日期控件&#xff0c;表格内编辑时间控件可用 - (年-月-日)时间范围控件 - (年-月-日)日期转换主要正则年-月-日/年-月-日 时:分/年-月-日 时:分:秒年…

Element-plus el-form、el-dialog 数据回显同时用时,重置失效问题

问题 当第一次打开网页并点击“编辑”按钮时&#xff0c;虽然对话框变量变为 true 使对话框可见&#xff0c;但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制&#xff0c;DOM 实际上还未更新&#xff0c;因此表单组件内绑定了这些有值的初始数据。这…

【病毒分析】DevicData家族扩散:全球企业和机构成为勒索病毒头号攻击目标!

1.背景 本文聚焦于勒索病毒家族 DevicData 的最新变种&#xff0c;命名为 .DevicData-P a2a9e9c勒索病毒。自2023年1月首次被发现以来&#xff0c;DevicData 家族一直对多个高价值目标展开攻击&#xff0c;包括企业用户、医疗机构和教育机构。这些目标通常持有大量敏感数据&a…

初始爬虫13(js逆向)

为了解决网页端的动态加载&#xff0c;加密设置等&#xff0c;所以需要js逆向操作。 JavaScript逆向可以分为三大部分&#xff1a;寻找入口&#xff0c;调试分析和模拟执行。 1.chrome在爬虫中的作用 1.1preserve log的使用 默认情况下&#xff0c;页面发生跳转之后&#xf…