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

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 

终端运行  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  热重载运行 

 


http://www.mrgr.cn/news/48133.html

相关文章:

  • springboot483基于springboot的校园失物招领系统(论文+源码)_kaic
  • docker 部署win系统
  • 【HarmonyOs学习日志(14)】计算机网络之域名系统DNS
  • Spring(七)Spring Cloud----Feign、Zuul和Apollo
  • 解决 Curl 自签名证书验证失败的实用指南
  • 机械鹦鹉与真正的智能:大语言模型推理能力的迷思
  • 大数据新视界 --大数据大厂之 ClickHouse:大数据分析领域的璀璨明星
  • ☕️从小工到专家的 Java 进阶之旅:全新的HttpClient,现代高效的网络通信利器
  • 每日OJ题_牛客_小乐乐改数字_模拟_C++_Java
  • 算法的收敛速度计算过程
  • 『网络游戏』进入游戏主城UI跳转主城【26】
  • Linux下的Makefile基本操作
  • Redis 的安装与部署(图文)
  • 中间件:SpringBoot集成Redis
  • FLBOOK一款强大的电子产品图册制作工具
  • springboot健康管理平台-计算机毕业设计源码38430
  • 【unity框架开发9】序列化字典,场景,vector,color,Quaternion
  • 孤独相伴 - 结婚十七年
  • 从数据到洞察:ChatGPT如何革新Python数据分析流程
  • 跟着深度学习好书实践tensorflow神经网络
  • NRF24L01原子HAl库学习
  • cuda实现gemm
  • numpy学习
  • 上门服务系统|上门服务小程序|上门服务系统成品
  • 2024系统分析师---试题四:论数据分片技术及其应用
  • 如何找到I2c设备的地址以及读写寄存器