一、前言
上一章中我们通过编辑器的指导简单的创建了一个Flutter项目，这篇文章我们通过修改一些配置，深入了解一下Flutter项目中的几个关键文件，以及它是如何跨平台的。
二、项目目录结构
各个目录或重要文件说明
- android : 安卓原生工程配置相关文件
- build: 打包输出文件,熟悉安卓开发的一般会比较熟悉build文件夹,iOS打包需要通过XCode完成
- lib: flutter源码都存放在此文件夹下，main.dart是程序入口文件
void main() {runApp(const MyApp());
}
main方法就是程序的主入口
- linux,macos,web: 其他跨平台配置相关文件
- test:测试相关文件
- pubspec.yaml:所有的三方依赖以及版本号都通过该文件配置，类似android 的gradle文件.
三、修改项目
3.1 插入图片资源
首先可以在flutter文件夹目录下建立一个专门存放图片的文件夹
放入相关图片
3.2 声明资源文件
需要在pubspec.yaml文件中设置assets属性
flutter:uses-material-design: trueassets:- images/a.jpg- images/b.jpg
3.3 pub更新
此时我们需要运行一下flutter pub get 更新一下依赖的资源
3.4 修改main.dart文件
class _MyHomePageState extends State<MyHomePage> {//声明一个图像数组List _imageNames = [{'image': 'images/a.jpg', 'text': '新年快乐'},{'image': 'images/b.jpg', 'text': '兔年大吉'}];//声明一个index变量int _index = 0;//通过index的自增与数组长度取余运算实现循环查找下标void _onSwitch() {setState(() {_index = (++_index) % _imageNames.length;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Container(width: 300,height: 300,child: Column(children: [Container(width: 128,height: 128,margin: EdgeInsets.only(top: 10,bottom: 10),child: Image.asset(_imageNames[_index]['image'],fit: BoxFit.cover,),),Text(_imageNames[_index]['text']),],),),),floatingActionButton: FloatingActionButton(onPressed: _onSwitch,tooltip: '切换',child: const Icon(Icons.swap_horizontal_circle_outlined),), // This trailing comma makes auto-formatting nicer for build methods.);}
}
四、flutter有无状态
在flutter组件中，部件分为有状态or无状态，
4.1 无状态小部件
这些组件默认是不可变的，任何数据的更改以及其他部件的更改都不会触发该部件的改动，例如一些固定文本、图标以及一些常用固定无状态UI等
用StatelessWidget声明，也可以用stl快捷输入
class Stateless extends StatelessWidget {const Stateless({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const Placeholder();}
}
4.2 有状态小组件
对于某些组件，我们是需要动态更改部分配置的，例如一些文本的展示切换，复选框的选中状态等，需要使用StatefulWidget声明,也可以用sft快捷输入
在setState()在输入数据更改时重新渲染
class Stateful extends StatefulWidget {const Stateful({Key? key}) : super(key: key);@overrideState<Stateful> createState() => _StatefulState();
}
class _StatefulState extends State<Stateful> {@overrideWidget build(BuildContext context) {return const Placeholder();}
}
很明显，我们上面的修改是需要根据用户切换展示不同的图像照片和文本，所以是有状态的。 数据的更改在 声明的onSwitch函数中通过setState()更改index的计算方式去动态更改。
//通过index的自增与数组长度取余运算实现循环查找下标
void _onSwitch() {setState(() {_index = (++_index) % _imageNames.length;});
}
五、Flutter页面组成元素
Flutter通过缩进 简洁地描述了整个页面的组成结构
- AppBar:导航栏
- body:主界面
-
- Center:居中组件
-
-
- child :只需一个小部件
-
-
-
- children:接受小部件列表
-
-
-
- Column:纵向布局，元素按纵向排布
-
- floatingActionButton:一个悬浮按钮
可以看到页面的子元素层次和元素和HTML的margin width,height都很类似，熟悉前端开发的同学应该对这部分会比较熟悉。
六、运行效果
通过修改了若干配置，我们就简单实现了点击右下方的按钮去更新app页面内部元素的功能
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享