Flutter项目实战-我的第一个Flutter项目-了解Flutter项目结构(二）

从零开始学安卓
514 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

一、前言

上一章中我们通过编辑器的指导简单的创建了一个Flutter项目，这篇文章我们通过修改一些配置，深入了解一下Flutter项目中的几个关键文件，以及它是如何跨平台的。

二、项目目录结构

image.png

各个目录或重要文件说明

  • 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文件夹目录下建立一个专门存放图片的文件夹

image.png

放入相关图片

image.png

3.2 声明资源文件

需要在pubspec.yaml文件中设置assets属性

flutter:

  uses-material-design: true
  assets:
    - images/a.jpg
    - images/b.jpg

3.3 pub更新

此时我们需要运行一下flutter pub get 更新一下依赖的资源

image.png

image.png

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;
    });
  }



  @override
  Widget 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);

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

4.2 有状态小组件

对于某些组件，我们是需要动态更改部分配置的，例如一些文本的展示切换，复选框的选中状态等，需要使用StatefulWidget声明,也可以用sft快捷输入

在setState()在输入数据更改时重新渲染

class Stateful extends StatefulWidget {
  const Stateful({Key? key}) : super(key: key);

  @override
  State<Stateful> createState() => _StatefulState();
}

class _StatefulState extends State<Stateful> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

很明显，我们上面的修改是需要根据用户切换展示不同的图像照片和文本，所以是有状态的。 数据的更改在 声明的onSwitch函数中通过setState()更改index的计算方式去动态更改。

//通过index的自增与数组长度取余运算实现循环查找下标
void _onSwitch() {
  setState(() {
    _index = (++_index) % _imageNames.length;
  });
}

五、Flutter页面组成元素

Flutter通过缩进 简洁地描述了整个页面的组成结构

image.png

  • AppBar:导航栏
  • body:主界面
    • Center:居中组件
      • child :只需一个小部件
      • children:接受小部件列表
      • Column:纵向布局，元素按纵向排布
  • floatingActionButton:一个悬浮按钮

可以看到页面的子元素层次和元素和HTML的margin width,height都很类似，熟悉前端开发的同学应该对这部分会比较熟悉。

六、运行效果

通过修改了若干配置，我们就简单实现了点击右下方的按钮去更新app页面内部元素的功能

image.png image.png

七、总结

本篇文章我们基本实现一个Flutter项目的搭建和运行，接下来一起继续探索flutter的世界吧。

avatar
文章
阅读
粉丝