小菜鸡开始学习flutter之十七

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

今日目标

前面完成了全部的准备工作后，今天就可以进入flutter语法学习了，今日主要了解一下flutter目录结构，入口、自定义Widget，Center,Text,MaterialApp,Scaffold这些内容。

目录结构

初期学习的时候只要了解以下几个文件夹的作用就好了

文件夹	作用
android	存放android平台相关的代码
ios	存放ios平台相关的代码
lib	flutter相关代码，我们主要编写的代码就存在这里
test	存放单元测试的代码
pubspc.yaml	配置文件，一般在这上面显示我们使用的第三方库的依赖

入口文件

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

import 'xxx/myapp.dart' as MyApp;
void main(){
    runApp(MyApp());
}

上面就是main.dart的基本内容，其中main()是dart的入口方法，runApp()是flutter的入口方法，MyApp就是我们自定义的一个组件。

自定义组件

在我们的flutter中，自定义组件就是创建一个类，这个类需要继承StatelessWidget/StatefulWidget，初期的时候我们都继承StatelessWidget无状态组件，状态是不可以改变的。到了后面的时候我们在学习StatefulWidget有状态组件。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
        child: Text(
          '你太有才了——flutter',
          textDirection: TextDirection.rtl,
          style: TextStyle(
            fontSize: 40.0,
            color: Color.fromARGB(255, 82, 1, 231)
          ),
        ));
  }
}

像上面这样，我们就简单的定义一了一个MyApp的自定义类并运行了起来。在flutter中实例化一个类可以省略new 不写。

MaterialApp和Scaffold

MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所需要的一些Widget，一般作为顶层Widget使用。
常用的属性：

• home(主页)
• title(标题)
• color(颜色)
• theme(主题)
• routes(路由)

Scaffold是Material Design布局结构的基本实现，此类提供了用于显示drawer、snackbar和底部sheet的api。
常用的属性

• appBar(显示在界面顶部的一个appbar)
• body(当前界面所显示的主要内容Widget)
• drawer(抽屉菜单控件)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('你太有才了_Flutter'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
        child: Text(
      '你太有才了——flutter1',
      textDirection: TextDirection.rtl,
      style:
          TextStyle(fontSize: 40.0, color: Color.fromARGB(255, 255, 38, 0)),
    ));
  }
}

得益于vscode的代码提示，我们可以直接看到对应类上有哪些属性。

ending

持续学习,加油，如有不对的地方还请指正，谢谢~~