1.Flutter学习:Flutter目录结构、入口、Text组件、MaterialApp组件、Scaffold组件

易帜

发布于 2022-02-09 15:54:06

7910

发布于 2022-02-09 15:54:06

文章被收录于专栏：易帜的Android 学习之旅

学习自：Dart Flutter教程_Dart Flutter入门实战视频教程-2019年新出.

Flutter目录结构

我们来看一下Flutter中结构吧！

android文件夹: 表示生成的Android的项目目录 build文件夹：表示运行项目时生成的文件 ios：表示ios的项目目录 lib：存放Flutter相关代码，主要编写的代码就放在这个文件夹中。 pubspec.yaml：表示项目的配置文件。

这里主要讲一下，pubspec.yaml文件中的参数，以及如何添加外部依赖。

`pubspec.yaml`

pubspec.yaml配置文件说明 .

入口

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

void main() {
	runApp(new TestApp());
}

在dart中我们在创建对象时，可以省略new
如下所示：
void main() {
	runApp(TestApp());
}



可简写为
void main() => runApp(TestApp());

其中main方法就是dart的入口方法，runApp就是flutter的入口方法。 TestApp()是一个自定义的组件. 直接上手代码解释吧！

void main()=>{
    runApp(
      Center(
        child: Text(
          'Flutter学习第一天',
          textDirection: TextDirection.ltr,
        ),
      )
    );
};

关于自定义组件

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget，目前我们先使用的是StatelessWidget。 StatelessWidget是无状态组件，状态不可改变得widget StatefulWidget是有状态的组件，持有的状态可能在widget生命周期改变

void main()=>{
  runApp(TestApp())
};
//自定义Widget
class TestApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return   Center(
      child: Text(
        '我是一个文本内容',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

`MaterialApp`组件

MaterialApp ：封装了大部分的Material Design风格的Widget。一般作为根组件使用。
常用属性为：home(主页)、title(标题)、color(颜色)、theme(主题)、routs(路由)。

`Scaffold`组件

Scaffold:通常我们是在MaterialApp中的home对应着Scaffold组件，它是Material Design布局结构的基本实现，此类提供了用于显示的drawer、snackbar和底部sheet的API
常用属性为: appBar:显示在界面顶部的一个AppBar body:当前界面所需要显示的主要内容Widget drawer：抽屉菜单组件

小练习

综合上述所学，进行一个小练习

void main() => runApp(TestApp());

//自定义组件
class TestApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.yellow  //表示主题颜色
      ),
      home: Scaffold(
        appBar: AppBar(       //设置标题栏
          title: Text('Flutter Demo'),
        ),
         body:HomeContent(),
      ),
    );
  }
}
//自定义组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Flutter探索之路',
        style: TextStyle(
          color: Colors.cyanAccent  //设置字体颜色
        ),
      ),
    );
  }
}

其效果如图：