07、Flutter开发创建项目及其案例（二）

2.3、代码改进

2.3.1、改进样式

我们可能希望文字居中显示，并且可以大一些；
居中显示：需要使用另外一个Widget，Center；
文字大一些：需要给Text文本设置一些样式；
我们修改代码如下：
我们在Text小部件外层包装了一个Center部件，让Text作为其child；
并且，我们给Text组件设置了一个属性：style，对应的值是TextStyle类型；

import 'package:flutter/material.dart';

main(List<String> args) {
    
    
  runApp(
    Center(
      child: Text(
        "Hello World",
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 36),
      ),
    )
  );
}

2.3.2、改进结构

目前我们虽然可以显示HelloWorld，但是最底部的背景是黑色，并且页面并不够结构化。
正常的App页面是有一定的结构，如通常会有导航栏，背景颜色等
在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。
我们通过下面的代码来实现：


import 'package:flutter/material.dart';

main(List<String> args) {
    
    
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("CODERWHY"),
        ),
        body: Center(
          child: Text(
            "Hello World",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize: 36),
          ),
        ),
      ),
    )
  );
}

在最外层包裹一个MaterialApp
这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计，并且目前我们使用了其中两个属性；
title：这个是定义在Android系统中打开多任务切换窗口时显示的标题；（暂时可以不写）
home：是该应用启动时显示的页面，我们传入了一个Scaffold；
Scaffold是什么呢？
翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
Scaffold也有一些属性，比如appBar和body；
appBar是用于设计导航栏的，我们传入了一个title属性；
body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；

2.3.3、进阶案例

import 'package:flutter/material.dart';

main(List<String> args) {
    
    
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("CODERWHY"),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Checkbox(
                value: true,
                onChanged: (value) => print("Hello World")),
              Text(
                "同意协议",
                textDirection: TextDirection.ltr,
                style: TextStyle(fontSize: 20),
              )
            ],
          ),
        ),
      ),
    )
  );
}

2.4、重构代码

2.4.1、创建自己的Widget

很多学习Flutter的人，都会被Flutter的嵌套劝退，当代码嵌套过多时，结构很容易看不清晰。
这里有两点我先说明一下：

Flutter整个开发过程中就是形成一个Widget树，所以形成嵌套是很正常的。
关于Flutter的代码缩进，更多开发中我们使用的是2个空格

但是，我们开发一个这么简单的程序就出现如此多的嵌套，如果应用程序更复杂呢？我们可以对我们的代码进行封装，将它们封装到自己的Widget中，创建自己的Widget；

创建Widget
在Flutter开发中，我们可以继承自StatelessWidget或者StatefulWidget来创建自己的Widget类；
StatelessWidget：没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；
StatefulWidget：需要保存状态，并且可能出现状态改变的Widget；
在上面的案例中对代码的重构，我们使用StatelessWidget即可，所以我们接下来学习一下如果利用StatelessWidget来对我们的代码进行重构；

2.4.2、StatelessWidget

StatelessWidget通常是一些没有状态（State，也可以理解成data）需要维护的Widget：
它们的数据通常是直接写死（放在Widget中的数据，必须被定义为final，为什么呢？我在下一个章节讲解StatefulWidget会讲到）；
从parent widget中传入的而且一旦传入就不可以修改；
从InheritedWidget获取来使用的数据；
创建一个StatelessWidget的格式：
1、让自己创建的Widget继承自StatelessWidget；
2、StatelessWidget包含一个必须重写的方法：build方法；

class MyStatelessWidget extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return <返回我们的Widget要渲染的Widget，比如一个Text Widget>;
  }
}

build方法的解析：
Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法；
我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget；
StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；
build方法什么情况下被执行：
1、当我们的StatelessWidget第一次被插入到Widget树中时；
2、当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建；
3、如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；

2.4.3、重构案例代码

现在我们就可以通过StatelessWidget来对我们的代码进行重构了
因为我们的整个代码都是一些数据展示，没有数据的改变，使用StatelessWidget即可；
另外，为了体现更好的封装性，我对代码进行了两层的拆分，让代码结构看起来更加清晰；
重构后的代码如下：

import 'package:flutter/material.dart';

main(List<String> args) {
    
    
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("CODERWHY"),
        ),
        body: HomeContent(),
      ),
    )
  }
}

class HomeContent extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Checkbox(
              value: true,
              onChanged: (value) => print("Hello World")),
          Text(
            "同意协议",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize: 20),
          )
        ],
      ),
    );
  }
}

flutter开发-MAC终端配置的环境变量失效问题
 01、Flutter开发Dart安装与定义变量
 02、Flutter开发Dart-数据类型
 03、Flutter开发Dart-函数
 04、Flutter开发Dart的异步（一）
05、Flutter开发Dart的异步（二）
06、Flutter开发创建项目及其案例（一）