Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)

String name;
String tag;
//默认构造方法，赋值给name和tag
ModelA(this.name, this.tag);
//返回一个空的ModelA
ModelA.empty();
//返回一个设置了name的ModelA
ModelA.forName(this.name);
}

///模拟等待两秒，返回OK
request() async {
await Future.delayed(Duration(seconds: 1));
return “ok!”;
}
///得到"ok!"后，将"ok!“修改为"ok from request”
doSomeThing() async {
String data = await request();
data = “ok from request”;
return data;
}
///打印结果
renderSome() {
doSomeThing().then((value) {
print(value);
///输出ok from request
});
}

import ‘package:flutter/material.dart’;
class DEMOWidget extends StatelessWidget {
final String text;
//数据可以通过构造方法传递进来
DEMOWidget(this.text);
@override
Widget build(BuildContext context) {
//这里返回你需要的控件
//这里末尾有没有的逗号，对于格式化代码而已是不一样的。
return Container(
//白色背景
color: Colors.white,
//Dart语法中，?? 表示如果text为空，就返回尾号后的内容。
child: Text(text ?? “这就是无状态DMEO”),
);
}
}

import ‘dart:async’;
import ‘package:flutter/material.dart’;
class DemoStateWidget extends StatefulWidget {
final String text;
通过构造方法传值
DemoStateWidget(this.text);
///主要是负责创建state
@override
_DemoStateWidgetState createState() => _DemoStateWidgetState(text);
}
class _DemoStateWidgetState extends State {
String text;
_DemoStateWidgetState(this.text);
@override
void initState() {
///初始化，这个函数在生命周期中只调用一次
super.initState();
///定时2秒
new Future.delayed(const Duration(seconds: 1), () {
setState(() {
text = “这就变了数值”;
});
});
}
@override
void dispose() {
///销毁
super.dispose();
}
@override
void didChangeDependencies() {
///在initState之后调 Called when a dependency of this [State] object changes.
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
return Container(
child: Text(text ?? “这就是有状态DMEO”),
);
}
}

new Container(
///四周10大小的maring
margin: EdgeInsets.all(10.0),
height: 120.0,
width: 500.0,
///透明黑色遮罩
decoration: new BoxDecoration(
///弧度为4.0
borderRadius: BorderRadius.all(Radius.circular(4.0)),
///设置了decoration的color，就不能设置Container的color。
color: Colors.black,
///边框
border: new Border.all(color: Color(GSYColors.subTextColor), width: 0.3)),
child:new Text(“666666”));

//主轴方向，Colum的竖向、Row我的横向
mainAxisAlignment: MainAxisAlignment.start,
//默认是最大充满、还是根据child显示最小大小
mainAxisSize: MainAxisSize.max,
//副轴方向，Colum的横向、Row我的竖向
crossAxisAlignment :CrossAxisAlignment.center,
Expanded 在 Colum 和 Row 中代表着平均充满，当有两个存在的时候默认均分充满。同时页可以设置 flex 属性决定比例。
new Column(
///主轴居中,即是竖直向居中
mainAxisAlignment: MainAxisAlignment.center,
///大小按照最小显示
mainAxisSize : MainAxisSize.min,
///横向也居中
crossAxisAlignment : CrossAxisAlignment.center,
children: [
///flex默认为1
new Expanded(child: new Text(“1111”), flex: 2,),
new Expanded(child: new Text(“2222”)),
],
);

///返回一个居中带图标和文本的Item
_getBottomItem(IconData icon, String text) {
///充满 Row 横向的布局
return new Expanded(
flex: 1,
///居中显示
child: new Center(
///横向布局
child: new Row(
///主轴居中,即是横向居中