Flutter基础

Posted 2021-12-20 彬彬杨

一. 创建Flutter项目

1.1. 通过命令行创建

通过命令行创建非常简单，在终端输入以下命令即可：

• **注意：**Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识

• 创建完之后使用自己喜欢的开发工具打开即可

项目有两种方式：通过命令行创建 和 通过开发工具创建

flutter create learn_flutter

1.2. 通过开发工具创建

我这里也可以直接通过Android Studio来进行创建：

• 选择Start a new Flutter project，之后填写相关的信息即可，这里不再赘述

1.3. 默认程序分析

二. 开始Flutter代码 

2.1. Hello World

import 'package:flutter/material.dart';

main(List<String> args) 
  runApp(Text("Hello World", textDirection: TextDirection.ltr));

如果要居中，文字颜色等

textDirection  传入文字方向
style  设置样式,字体颜色等
Center 也是一个Widget，实现居中操作

三、Widget介绍

Widget是所谓的组件

• StatelessWidget： 没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；

• StatefulWidget： 需要保存状态，并且可能出现状态改变的Widget；

3.1Scaffold

 是什么呢？

• 翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；

• 所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；

• Scaffold也有一些属性，比如appBar和body；

• appBar是用于设计导航栏的，我们传入了一个title属性；

• body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；

主要参数有 appBar（导航栏或者Tabbar），body（界面内容）

 

runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
      appBar: AppBar(
          title: Text(
        "第一个项目",
        style: TextStyle(fontSize: 20, color: Colors.white),
      )),
      body: Center(
          child: Text("Hello world",
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 30, color: Colors.red))))));

3.2StatelessWidget

StatelessWidget通常是一些没有状态（State，也可以理解成data）需要维护的Widget：

• 它们的数据通常是直接写死（放在Widget中的数据，必须被定义为final，为什么呢？我在下一个章节讲解StatefulWidget会讲到）；

• 从parent widget中传入的而且一旦传入就不可以修改；

• 从InheritedWidget获取来使用的数据（这个放到后面会讲解）；

我们来看一下创建一个StatelessWidget的格式：

build方法什么情况下被执行呢？：

• 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；

• 1、当我们的StatelessWidget第一次被插入到Widget树中时（也就是第一次被创建时）；

• 2、当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建；

• 3、如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；

• StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；

3.3StatefulWidget

有状态改变的 Widget, 通常做交互变化状态，或者页面依据 data 刷新展示

为什么 StatefullWidget 是可变的？

• 其实无论 StatelessWidget 还是 StatefulWidget，其父类都是 Widget 因此它定义成员变量也是 final 修饰不可变~
• 但是继承 StatefulWidget 的子类，必需要实现 State createState(); 抽像方法。

• 所以可以变的是 State 这也是与 StatelessWidget 不一样的地方