Flutter 开发学习笔记(1):第一个简单的Flutter项目(上)

news/2024/6/20 20:50:04/文章来源:https://blog.csdn.net/qq_44695769/article/details/137176032

文章目录

  • 前言
  • 相关链接
  • 初始化项目
  • 设置键盘映射
    • 建议使用AnLink链接物理机。
  • 项目配置
  • 日志打印
  • 官方案例
    • 添加依赖
    • 主函数更换
    • 添加最简单的按钮
    • Flutter 项目结构
      • Flutter项目入口
      • Flutter的MyApp函数
    • 更新视图
      • 直接修改
      • 浅拷贝父节点数据
      • 思考
    • 修改布局
      • 子节点重构
      • 子节点布局重构
      • 多次扩展布局
      • 设置颜色主题

前言

为了得到的得到Uniapp的上位替代,最近打算使用Flutter开发。一般开发需要3个UI框架,icons库+UI框架+统计图

相关链接

【Flutter – 基础】快速入门 Flutter

Flutter 中文文档

编写第一个 Flutter 应用

在这里插入图片描述

初始化项目

注意,后续的代码主要就是抄官方的案例来的

编写第一个 Flutter 应用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

设置键盘映射

我习惯用vscode 的快捷键了,这里设置一下。
在这里插入图片描述
在这里插入图片描述

建议使用AnLink链接物理机。

在这里插入图片描述

在这里插入图片描述

项目配置

在这里插入图片描述

# 降低代码检验的标准,让我们更简单的使用dart
linter:rules:prefer_const_constructors: falseprefer_final_fields: falseuse_key_in_widget_constructors: falseprefer_const_literals_to_create_immutables: falseprefer_const_constructors_in_immutables: falseavoid_print: false

日志打印

日志打印使用[print]函数即可

print('hello flutter');

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

官方案例

添加依赖

在这里插入图片描述
在[pubspec.yaml]中添加

name: namer_app
description: A new Flutter project.publish_to: 'none' # Remove this line if you wish to publish to pub.devversion: 0.0.1+1environment:sdk: '>=2.19.4 <4.0.0'# 这个就是Flutter对应的第三方库了
dependencies:flutter:sdk: flutterenglish_words: ^4.0.0provider: ^6.0.0dev_dependencies:flutter_test:sdk: flutterflutter_lints: ^2.0.0flutter:uses-material-design: true

主函数更换

在这里插入图片描述

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return ChangeNotifierProvider(create: (context) => MyAppState(),child: MaterialApp(title: 'Namer App',theme: ThemeData(useMaterial3: true,colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),),home: MyHomePage(),),);}
}class MyAppState extends ChangeNotifier {var current = WordPair.random();
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {var appState = context.watch<MyAppState>();return Scaffold(body: Column(children: [Text('A random idea:'),Text(appState.current.asLowerCase),],),);}
}

确保没有报错之后测试运行

在这里插入图片描述

添加最简单的按钮

在这里插入图片描述

return Scaffold(body: Column(children: [Text('A random idea str:'),Text(appState.current.asLowerCase),//添加新的按钮ElevatedButton(onPressed: () {print('button click');},child: Text('Next'))],),);

在这里插入图片描述
在这里插入图片描述

Flutter 项目结构

Flutter项目入口

在这里插入图片描述

Flutter的MyApp函数

MyApp就是项目的布局入口了,类似于Wpf/windows里面的窗口。标注这整个外部的容器的形状

在这里插入图片描述
在这里插入图片描述
详细的请看官方教程

在这里插入图片描述
目前看下来是单向数据流的向下数据流。在React和Vue中,都是自顶向下的数据流。什么是数据流呢?在我看来,就是数据改变自动触发,自动传递的就是数据流。

为什么一般都是向下数据流呢,因为我们认为,父节点的数据是先生成,范围广,更准确的。就好像是从上流的水往下流一样,可以更能保证整个项目的稳定行。如果是向上数据流的话,那随意添加一个子节点都可能导致父节点发送改动。如果是双向数据流的话,会导致数据流动的方向不明确,难以维护。

那子节点又是怎么通知父节点的呢?一般都是通过函数回调的形式,就是手动通知父节点。相当于需要更加繁琐,明确的操作来保证父节点的数据稳定。

更新视图

更新视图需要用到notifyListeners,这个是用于通知视图的方法。在React和WPF中都是手动通知的,在Vue中是自动通知的。手动通知的好处就是可以操控。

注意:Dark有自己的命名规范,class大驼峰,类名和方法名都是小驼峰。

在这里插入图片描述

将[MyAppState]进行修改

//可通知视图修改的类
class MyAppState extends ChangeNotifier {//这个就相当于成员变量var current = WordPair.random();//手动声明回调函数,理论上来说,最好通过函数显性修改父节点属性void getNext(){current = WordPair.random();// 手动通知刷新视图元素notifyListeners();}//手动通知void notify(){notifyListeners();}
}

在这里插入图片描述

直接修改

    return Scaffold(body: Column(children: [Text('A random idea str:'),Text(appState.current.asLowerCase),//添加新的按钮ElevatedButton(onPressed: () {print('button click');//直接修改父节点属性appState.current = WordPair.random();//手动更新通知appState.notify();//上面两步等于下面一步,但是还是建议使用函数有限制的回调//appState.getNext();},child: Text('Next'))],),);

在这里插入图片描述

浅拷贝父节点数据

为了防止父节点的数据遭到随意的修改,我们这里使用浅拷贝来复刻父节点的数据

class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {//拿到父节点,由于父节点是单例,所以不需要别名var appState = context.watch<MyAppState>();//为了解决复杂的代码逻辑,在函数开头拿到数据,而不是直接对父节点的数据进行修改//这里是浅拷贝,不是深拷贝var pair  = appState.current;return Scaffold(body: Column(children: [Text('A random idea str:'),// Text(appState.current.asLowerCase),Text(pair.asLowerCase),//添加新的按钮ElevatedButton(onPressed: () {print('button click');//直接修改父节点属性// pair = WordPair.random();//手动更新通知// appState.notify();//上面是浅拷贝的修改,无法反馈到父节点appState.getNext();},child: Text('Next'))],),);}
}

思考

所以我们的节点应该都是这么挂的

  • MyApp + MyAppState
    • MyHomePage + appState=MyAppState,这里的appState都是向上一级的父节点属性

所以我现在的问题就是如果一个父节点挂载多个子节点,会如何。现在还不了解

修改布局

子节点重构

右键Text节点,Refactor->Extarct Flutter Widget

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

子节点布局重构

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

多次扩展布局

在Padding布局外侧添加Card布局

在这里插入图片描述
在这里插入图片描述

设置颜色主题

在这里插入图片描述

@overrideWidget build(BuildContext context) {final theme = Theme.of(context);       // ← Add this.return Card(color: theme.colorScheme.primary,    // ← And also this.child: Padding(padding: const EdgeInsets.all(20),child: Text(pair.asLowerCase),),);}

在这里插入图片描述

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

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

相关文章

Github 2024-04-02Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-04-02统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10系统设计指南 创建周期:2507 天开发语言:Python协议类型:OtherStar数量:241693 个Fork数量:42010 次关注人数:241693 人贡献…

Intellij IDEA / Android studio 可持续开发笔记

Intellij 的Java/安卓工具链有着一种不可持续性&#xff0c;这种不可持续性体现在多个方面。 首先是不可持续运行。IDEA 使用时间越长&#xff0c;内存占用越大&#xff0c;从不主动释放。运行时间越长&#xff0c;日志越多&#xff0c;从不主动清理。 然后是不完整的开源&am…

【SQL Server】1. 认识+使用

1. 创建数据库的默认存储路径 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft SQL Server 2008 R2 当我们选择删除数据库时&#xff0c;对应路径下的文件也就删除了 2. 导入导出数据工具的路径 3. 注册数据库遇到的问题 ??? 目前的问题就是服务器新建…

【Qt】使用Qt实现Web服务器(九):EventSource+JSON实现工业界面数据刷新

1、效果 效果如下,实时刷新温度、湿度 2、源码 2.1 index.html <html><body> <!-- 页面布局,本人对HTML标签不熟悉,凑合看吧 --> <div><label for

Oracle基础-PL/SQL编程 备份

1、PL/SQL简介 PL/SQL块结构 约定&#xff1a;为了方便&#xff0c;本文后面把PL/SQL简称PL。 PL程序都是以块&#xff08;BLOCK&#xff09;为基本单位&#xff0c;整个PL块分三部分&#xff1a;声明部分&#xff08;使用DECLARE开头&#xff09;、执行部分(以BEGIN开头)和异…

【JavaEE初阶系列】——synchronized原理及优化(偏向锁,轻量级锁,自旋锁,锁消除,锁粗化)

目录 &#x1f6a9;synchronized锁特性详细解说 &#x1f6a9;加锁工作过程(锁升级) &#x1f388;偏向锁 &#x1f388;轻量级锁(自适应的自旋锁) &#x1f388; 重量级锁 &#x1f6a9;其他的优化操作 &#x1f388;锁消除 &#x1f388;锁粗化 &#x1f388;相关面…

JavaScript动态渲染页面爬取——Selenium的使用

JavaScript动态渲染页面爬取 JavaScript动态渲染得页面不止Ajax一种。例如&#xff0c;有些页面的分页部分由JavaScript生成&#xff0c;而非原始HTML代码&#xff0c;这其中并不包含Ajax请求。还有类似淘宝这种页面&#xff0c;即使是Ajax获取的数据&#xff0c;其Ajax接口中…

LeetCode题练习与总结:螺旋矩阵

一、题目描述 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5]示例 2&#xff1a; 输入&#xff1a;ma…

C#手术麻醉信息系统源码,技术框架:Vue,Ant-Design+百小僧开源框架

C#手术麻醉信息系统源码&#xff0c;技术框架&#xff1a;Vue&#xff0c;Ant-Design百小僧开源框架 手术麻醉系统主要用于在手术过程中监测和控制患者的状态&#xff0c;确保手术的顺利进行并保障患者的生命安全。该系统通过一系列先进的医疗设备和技术&#xff0c;为手术患者…

on-my-zsh 命令自动补全插件 zsh-autosuggestions 安装和配置

首先 Oh My Zsh 是什么? Oh My Zsh 是一款社区驱动的命令行工具&#xff0c;正如它的主页上说的&#xff0c;Oh My Zsh 是一种生活方式。它基于 zsh 命令行&#xff0c;提供了主题配置&#xff0c;插件机制&#xff0c;已经内置的便捷操作。给我们一种全新的方式使用命令行。…

Vue插槽(Slots)深入解析

插槽内容与出口​ 在之前的章节中&#xff0c;我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props&#xff0c;但组件要如何接收模板内容呢&#xff1f;在某些场景中&#xff0c;我们可能想要为子组件传递一些模板片段&#xff0c;让子组件在它们的组件中渲染这些片…

蓝色wordpress外贸建站模板

蓝色wordpress外贸建站模板 https://www.mymoban.com/wordpress/7.html

【Hadoop大数据技术】——Hive数据仓库(学习笔记)

&#x1f4d6; 前言&#xff1a; Hive起源于Facebook&#xff0c;Facebook公司有着大量的日志数据&#xff0c;而Hadoop是实现了MapReduce模式开源的分布式并行计算的框架&#xff0c;可轻松处理大规模数据。然而MapReduce程序对熟悉Java语言的工程师来说容易开发&#xff0c;但…

Pycharm选择使用Anaconda环境中的Pytorch 失败解决办法之一

前几日想要复现一篇论文&#xff0c;结果给配的台式机完全禁不住&#xff0c;老是报溢出&#xff0c;慢都没事&#xff0c;溢出就很难受了&#xff0c;因此想用自己笔记本的GPU来训练。 安装以后遇到一个问题&#xff1a; Anaconda里创建了环境&#xff0c;安装好了对应pytor…

基于springboot的实习生管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

总结UDP协议各类知识点

前言 本篇博客博主将详细地介绍UDP有关知识点&#xff0c;坐好板凳发车啦~ 一.UDP特点 1.无连接 UDP传输的过程类似于发短信&#xff0c;知道对端的IP和端口号就直接进行传输&#xff0c;不需要建立连接&#xff1b; 2.不可靠传输 没有任何的安全机制&#xff0c;发送端发…

音视频基础 (九)---FFmpeg过滤器框架

ffmpeg的filter⽤起来是和Gstreamer的plugin是⼀样的概念&#xff0c;通过avfilter_link&#xff0c;将各个创建好的filter按 ⾃⼰想要的次序链接到⼀起&#xff0c;然后avfilter_graph_config之后&#xff0c;就可以正常使⽤。 ⽐较常⽤的滤镜有&#xff1a;scale、trim、over…

Golang Context是什么

一、这篇文章我们简要讨论Golang的Context有什么用 1、首先说一下Context的基本作用&#xff0c;然后在讨论他的实现 (1)数据传递&#xff0c;子Context只能看到自己的和父Context的数据&#xff0c;子Context是不能看到孙Context添加的数据。 (2)父子协程的协同&#xff0c;比…

字符串-String 概述

1.用加号拼接 2.String概述 3.注意&#xff1a; 4.创建String对象两种方式 //1使用直接赋值获取一个字符串对象String s1 "ABC";System.out.println(s1);//ABC//使用new的方式来获取一个字符//空参构造&#xff1a;可以获取一个空白字符串对象String s2 new String…

动手学机器学习机器学习的基本思想+习题

正则化 后面这项叫作正则化项&#xff0c;可以对需要求出的参数θ的大小进行抑制 加入L2正则化项后&#xff0c;线性规划问题的解析解前面不再是X.T与X的乘积&#xff0c;加上λI后&#xff0c;从半正定变成了正定矩阵&#xff0c;从而确保了矩阵有逆 我们有时希望得到的模型参…