flutter学习第一章

你需要耐心观看，不然没有一颗学习的心，说得再详细也是徒劳的

flutter对于Android来说相信很多同学都有许许多多的问题

比如啊

1.fultter 如何刷新页面啊，

2.flutter 如何设置点击事件啊

3.flutter 如何刷新listView

4.flutter 如何延迟、网络刷新啊

等等 等等

这篇文章不讨论底层，有些东西也不讨论他是干啥的，

有这么一句话，只要你会用再去了解他的原理

ios的同学需要先学习一下dart语法

我就用Android的开始说了

Android 或 ios

Android 有个xml ,可以使用xml来先画界面，然后fingviewbyid来赋值，这是Android的思路

Android:java + xml来绘画基础页面

然而flutter他是分为不同两种的，如果感觉这种语法(画页面)很奇怪，那么建议先看一下drat语法

视图树(看不懂没关系，只要会用就行) + dart 来绘画页面的

Android 页面

1599017582(1).jpg

可分为很多种布局，相对，线性，绝对，等等

flutter对于初学者来说，目前你就只知道它有个 行和列布局(它也有很多种强大布局，目前只了解这2个就行)

flutter项目如下

1599017790(1).png

标注的是咋们基本用到的

Android:使我们最熟悉的东西

assets:资源文件夹

img:图片存放目录

ios:不鸟他

lib:存放dart代码目录

首先我们创建一个存放代码的目录

1599017994(1).png

我创建了一个名叫"day_01的文件夹"

1599018056(1).png

里边放了一个叫Day01的dart文件

我们打开文件，发现里边连个啥都没有！直接有点懵！

1599018194(1).png

很正常这个，先不要管，java是以文件名为类的(可能不太正确，但这是规则，就像命名规则一样)

而dart可以再一个文件中拥有很多很多的类(不说这么多了0.0，感觉再说多了都木了..,记住就行)

----------------------------------开始代码区域

简单地说，如果想深入了解的小伙伴，可以先去百度

StatelessWidget 与 StatefulWidget

StatelessWidget 为静态页面 不可刷新

StatefulWidget 为动态页面 可刷新UI页面

这么说吧 Android 就把它理解为（StatelessWidget 或 StatefulWidget）Activity

ios 就把他理解为（StatelessWidget 或 StatefulWidget）控制器

第一步[格式是死的记住就行]

在Android Studio 中输入

不想写可在Android Studio 中输入快捷键: stful 回车就能自动生成

//导包为material.dart
import 'package:flutter/material.dart';
//创建一个Day01 的类
class Day01 extends StatefulWidget {

  @override
  _Day01State createState() => _Day01State();
}
//返回视图树
class _Day01State extends State<Day01> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

小组件,现在就开始要死记硬背小组件了

-

---------------------------小组件

-

主题: MaterialApp 记忆法M'y'APP 根据提示就能找出来了

脚手架 ：Scaffold 记忆法 S ca,自行脑补

横向：Row 记忆法:它与Rom比较像，吧m倒过来就行了

竖向: Column 记忆法:它与Color(前边，加上提示就知道了)比较像，所以记住:Col提示就出来了

文本: Text 记忆法:这个就不用说了吧？

-

---------------------------小组件

-

就用这4个组件我们来看看竖向和横向的排列

啥，你说MaterialApp 是干啥的，怎么用，啥都不知道就往上搞？

MaterialApp 类似于一个可以设置APP的主题，你不想要也行，但是不推荐

Scaffold(脚手架) 的作用

他可以给这几个地方放view

1599019815(1).png

一般我们用boy

来继续我们说的横向竖向排列

加入主入口

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

它相当于

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

全部代码

import 'package:flutter/material.dart';

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

class Day01 extends StatefulWidget {

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

class _Day01State extends State<Day01> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
//------------------------------------------新增
      home: Scaffold(

        body: Column(

          children: <Widget>[


            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),
            Text("你好"),


          ],

        )

        ,


      ),
    );
  }
}

效果图:

BB2AF58177C785ECD05569EFE3C3D549.png

------------未完待续