参考文档链接:https://book.flutterchina.club/chapter2/first_flutter_app.html
参考视频链接:https://www.bilibili.com/video/BV1x4411j7bW?p=4
目录
- 项目文件结构
- Flutter入口文件和入口方法
- 使用MaterialApp 和Scaffold两个组件装饰App
一、项目文件结构
1 2 3 4 5 6 7 8 9 10 11 12 13 | ┬ └ projectname ┬ ├ * android - Android部分的工程文件 (Android平台相关代码) ├ * build - 项目的构建输出目录(运行项目的时候,生成的编译目录) ├ * ios - iOS部分的工程文件(iOS平台相关代码) ├ * lib - 项目中的Dart源文件(flutter相关代码,我们主要编写的代码,就在这个文件夹) ┬ └ * main.dart - 自动生成的项目入口文件,类似RN的index.js文件 ├ test - 测试相关文件(用于存放测试代码) └* pubspec.yaml - 项目依赖配置文件类似于RN的 package.json (项目的配置文件:项目的名称,描述,项目所需要的各种第三方库依赖) 如:在这个文件的dependencies里面配置第三方库 之后编译他会执行flutter packages get 操作,把远程的库下载到本地,之后就可以引入了 |
二、Flutter入口文件和入口方法
每一个flutter 项目的lib目录里面都有一个main.dart这个文件,就是flutter 的入口文件
接下来我们来做个练习
1 2 3 | 此行代码作用是导入了Material UI组件库。Material是一种标准的移动端和web端的视觉设计语言,Flutter默认提供了一套丰富的Material风格的UI组件。 import 'package:flutter/material.dart'; |
-
runApp里面调用组件,所有的组件都是类。
如中心点组件Center,实例化Center组件,里面的参数有child可以给他传入内容.(command + 左键,点击Center,可以查看这个类相关信息) -
child里面放一个文本,文本又是一个组件Text
Text里面可以传入data 数据文本,还可以传入{里面的可选参数} -
TextDirection.ltr, 文本的显示方式是从左像右
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | void main(){ runApp(new Center( child: new Text( "你好Flutter", textDirection: TextDirection.ltr, ) )); } new可以省略简写 void main(){ runApp(Center( child: Text( "你好Flutter", textDirection: TextDirection.ltr, ) )); } |
- 通过调用内置的组件,就是类,我们完成了一个最简单的一个Flutter项目
优化
- 虽然我们实现了功能,但是把所有的组件放到runApp里面是不合理的,一个组件可能会非常大,包含很多功能。接下来我们把Center组件单独抽类成一个单独的组件 - 自定义组件
自定义组件
-
StatelessWidget 无状态组件,状态不可变的widget,StatelessWidget 是一个抽象类,里面有build的抽象方法
-
MyApp继承了StatelessWidget这个抽象类,需要实现里面的抽象方法
- 鼠标放到MyApp上,点击修复,就会自动生成buil方法,该方法返回widget这个部件/组件
- 在flutter里面所有的东西都是组件,Center,Text也是一个widget
3.接下来我们把Center组件抽类出来,放到build里面
- 自定义组件MyApp里面返回了Center这样能一个组件,这个时候就可以将MyApp传入到runApp里面
- 所有和数字相关的都是double类型,默认是px,所以传入的值,都的小数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Text( "你好Flutter 777", textDirection: TextDirection.ltr, style: TextStyle( fontSize: 20.0, // color: Colors.yellow, color: Color.fromRGBO(244, 233, 121, 0.5) ), ) ); } } void main(){ runApp(MyApp()); // MyApp()实例化MyApp,重新编译 } |
三、使用MaterialApp 和Scaffold两个组件装饰App
-
通过他们给App加导航和背景
-
MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design 所需要的一些Widget.一般作为根组件使用.
-
MaterialApp里面有属性home属性
-
home里面我们继续传入Scaffold组件,里面才可以定义appBar 导航栏,和body
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 改造代码 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home:Scaffold( appBar: AppBar( title: Text('Flutter Demo') ), body: HomeContent(), ) ); } } //定义另外的一个组件 class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return Center( child: Text( "你好Flutter 777", textDirection: TextDirection.ltr, style: TextStyle( fontSize: 40.0, color: Colors.yellow, // color: Color.fromRGBO(244, 233, 121, 0.5) ), ) ); } } |
效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //theme属性 可以配置应用的颜色主题,把导航栏的背景颜色,改为黄色 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home:Scaffold( appBar: AppBar( title: Text('Flutter Demo') ), body: HomeContent(), ), theme: ThemeData( primarySwatch: Colors.yellow ), ); } } |
效果: