Flutter入门篇（四）：了解demo

参考：https://zhuanlan.zhihu.com/p/83781896

---

一、基本操作

 执行这段代码将会再手机屏幕上显示一个helloworld

1.runApp

runApp是Flutter内部提供的一个函数当我们启动一个Flutter应用程序时就是从调用这个函数开始的

void runApp(Widget app) {
  ...省略代码
}

2.Widget：

Widget是一个组件或者叫控件，flutter中万物皆Widget

3.material：

material是Google公司推行的一套设计风格

4.Text：

Text也是一个Widget，他继承子StatelessWidget,statelessWidget继承Widget

statelessWidget是个

class Text extends StatelessWidget {
  const Text(
    this.data, {//data必传
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  });
}

 5.Center：

使用Center包装Text

6.MaterialApp:

虽然Center可以中心显示但是界面有点单调所以我们使用跟高级的MaterialApp来包装我们要显示的东西

home是主页，home传入了Scaffold(脚手架)对象作为启动的Widget，Scaffold由appBar和body组成

appBar就是标题，我们给属性title传入了string

body是页面的内容部分

---

二、创建自己的Widget

flutter的开发就是Widget的层层嵌套，为了模块化我们可以定义自己的Widget.自定义的Widget大多继承自StatelessWidget或者StatefulWidget

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

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

 build被使用:

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

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

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

列表数据：

创建一个列表Widget, 竖直排列赋有文字

滚动显示-------------ListView：

由于之前的第三张图片放不下屏幕所以我们可以价格滚动显示

Padding: 边框Widget， 这里是给三个列表之外加的边框

 

Container：也具有padding 属性

Sizedbox：可以理解为有尺寸的空白有高度属性