你需要耐心观看,不然没有一颗学习的心,说得再详细也是徒劳的
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 页面
可分为很多种布局,相对,线性,绝对,等等
flutter对于初学者来说,目前你就只知道它有个 行和列布局(它也有很多种强大布局,目前只了解这2个就行)
flutter项目如下
标注的是咋们基本用到的
Android:使我们最熟悉的东西
assets:资源文件夹
img:图片存放目录
ios:不鸟他
lib:存放dart代码目录
首先我们创建一个存放代码的目录
我创建了一个名叫"day_01的文件夹"
里边放了一个叫Day01的dart文件
我们打开文件,发现里边连个啥都没有!直接有点懵!
很正常这个,先不要管,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
一般我们用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("你好"),
],
)
,
),
);
}
}
效果图:
------------未完待续