菜鸟学Flutter 1-初识Flutter

写这个就是为了巩固，顺便以后来查。

配置开发环境，按照网上的教程配置基本上都有坑，我就不写了（我到处踩坑，都不知道这环境到底是怎么配置成功的。反正它就是成功了）

先贴代码，后面逐行进行解释

目录

正文开始

StatelessWidget

StatefulWidget

---

正文开始

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的第一个Flutter APP',
      home: HomePage(title: '首页',),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key key, this.title}) : super(key: key); //构造函数

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text("This is a Text Widget !!"),
      )
    );
  }
}

好，代码也贴了。我先说明一下，初次接触Flutter难免有不足的地方，后续再补（嘿嘿，我就当公开的私人博文了)。

import 'package:flutter/material.dart';

第一行中的 import '*' 是dart语法中的导入外部包。

其中 package:flutter/material.dart 是Material Design(质感设计，后简称MD)风格，了解过Android的应该都不陌生吧。

 

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

main() 函数(方法)，知道编程都不会陌生，这个就是程序的主入口。

Flutter 中执行也是从这里开始的。

=> 而这个符号是dart中的单行函数(方法)，注意：这是一条有返回值的单行函数（方法）。

上式也可以写成

void main(){
    return runApp(App());
}

诶，很奇怪是不是？返回值是 void 怎么还能return呢？其实dart任何函数(方法)都有返回值 除非你将它指定为void（但是main好像不遵循这个规则，我也是太了解，有知道的大佬可以给我解释下，嘿嘿。），就算你是写成这样

main(){
    return runApp(App());
}

它还是能够运行。好吧，我们来测试一个方法。

好了，这是dart的语法规则，我只是粗略提一下，

runApp() 函数(方法)，这是App的开始方法，dart 执行了main函数碰到它了怎么办？

没办法，执行它呗。（注意：main()函数并没有执行完哦，这时候还在执行runApp()呢！）

 

StatelessWidget

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的第一个Flutter APP',
      home: HomePage(title: '首页',),
    );
  }
}

上面的代码就是定义一个类。现在来说一下，Flutter常用的两种形态（毕竟我也没深入了解，想要深入了解框架可以看这篇阿里巴巴Flutter技术全解析）

但是，Flutter中一切皆Widget！

这句话很重要哦！

StatelessWidget 无状态的组件（本人理解：不可变的，静态的）

何为静态的页面?

静态：不可变的，最终的。

也就是说，该Widget一经绘制将不可变。

哎呀，StatelessWidget好像就这样了！

对了，好像还没解释代码……（小尴尬）。

那么 build(BuildContext context) 这个函数(方法)是干嘛的呢？

这个牵扯得就有点深入了……(所以，我们就先不讲，先会用就行了)

但是这个方法是必须要写的，否则会报错哦。

至于用法，就只要知道它是构建并返回一个Widget。

然而接下来这段就是App的框架了。

    return MaterialApp(
      title: '我的第一个Flutter APP',
      home: HomePage(title: '首页',),
    );

这些参数什么的下一篇文章再细说(我都写了一部分了，发现太乱了，又给删掉了。)

 

StatefulWidget

class HomePage extends StatefulWidget {
  const HomePage({Key key, this.title}) : super(key: key); //构造函数

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

代码贴了，接下来说一下StatefulWidget。

StatefulWidget 有状态的组件(本人理解：可变的，能够实时变化的)

const HomePage({Key key, this.title}) : super(key: key); //构造函数

dart中的构造函数(方法)很简单，固定写法就是这样。

 

HomePage({Key key, this.title}) 来看下参数。

{可选参数1，可选参数2}

如上说述，{}中的是可选参数，何为可选？

也就是，你可以给某个指定的参数赋值。

如下（Text() 是Flutter中的一个Widget）：

const Text(this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  })

data是必写参数，然后接下来的一切都是可选写的参数。

举个例子：

必写参数没有写，所以会报错。

只写一个必写参数，Ok。

写一个必写参数，写一个可选参数，Ok。

相信你也发现了，除了必写参数之外，其他的都要指定。

比如TextAlign参数（每个参数由逗号隔开，函数(方法)传值知道吧。）

textAlign: TextAlign.left,

好，可选参数暂时告一段落，我们回到StatefulWidget

class HomePage extends StatefulWidget {
  const HomePage({Key key, this.title}) : super(key: key); //构造函数
  
  final String title;
  
  @override
  _HomePageState createState() => _HomePageState();
  
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Text(
            "This is a TextWidget!!",
            textAlign: TextAlign.left,
          ),
        ));
  }
}

上面这段代码其实是固定写法，写一个Statefulwidget创建返回一个继承至State的泛型，然后在State中的build中写返回的控件。

（dart中没有类似于java的private，在变量(函数)前面添加一个下划线就表示该变量(函数)为私有的 _HomePageState 就是一个私有类）

 

Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Text(
            "This is a TextWidget!!",
            textAlign: TextAlign.left,
          ),
        ));

脚手架，这是Flutter提供的通用App框架，其中包含了一般应用应有的布局(后面再作详解)。

最后贴一张图