flutter学习（二）结构详解

本篇主要讲解flutter的目录结构介绍、入口、自定义widget、center组件、text组件、MaterialApp组件、Scaffold组件

一.目录结构

我们着重需要注意一下几个文件夹，其他的暂时不用理会

二.Flutter入口文件、入口方法

每一个flutter项目的lib目录里面都有一个main.dart这个文件就是flutter的入口文件，main.dart里面的

void main() {
  runApp(Myapp());
}
也可以简写
void main()=> runApp(Myapp());

其中的main方法就是dart的入口方法，runApp方法就是flutter的入口方法。Myapp是一个自定义的一个组件

三.自定义组件

• center组件的使用

import 'package:flutter/material.dart';
void main() {
  runApp(Center(
    child: Text(
      '您好，flutter',
      textDirection: TextDirection.ltr,
    ),
  ));
}

效果如图：

四、flutter把内容单纯抽离成一个组件

代码都放在runApp不合理，所以我们要自定义组件调用

在flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget，前期我们都继承StatelessWidget。后期在给大家讲StatefulWidget的使用。

• StatelessWidget是无状态的组件，状态不可改变的widget
• StatefulWidget是有状态的组件，持有的状态可能在widget生命周期改变

import 'package:flutter/material.dart';
void main() {
  runApp(Myapp());
}

//自定义组件
class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '您好，flutter',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

五、MaterialApp组件、Scaffold组件装饰App

1. MaterialApp
   1.1 MaterialApp是一个方便的widget，他封装了应用程序实现Material Design所需要的一些widget。一般作为顶层widget使用
   1.2 常用属性：

   • home（主页）
   • title（标题）
   • color（颜色）
   • theme（主题）
   • routes（路由）

2. Scaffold
   2.1 Scaffold是Material Design布局结构的基本实现，此类提供了用于显示drawer、snackbar和底部sheet的API。
   2.2 Scaffold有下面几个主要的属性

   • appBar-显示在界面顶部的一个AppBar
   • body-当前界面所显示的主要内容的widget
   • drawer-抽屉菜单控件

import 'package:flutter/material.dart';

void main() {
  runApp(Myapp());
}

//自定义组件
class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'flutter demo',
            style: TextStyle(
              fontSize: 17.0,
              color: Colors.red,
            ),
          ),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primaryColor: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '您好，flutter',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

到此本篇接结束了，小伙伴还是要多敲，才熟悉，写起来才得心应手，看在这么努力的份上，留下个小心心❤在走吧