这篇文章主要讲的是flutter对页面的布置工作是如何进行的，先放一些资料链接。
Dart类函数详解：https://www.jianshu.com/p/44ae73a58ebc
Text参数详解：https://blog.csdn.net/chenlove1/article/details/84574651
Container参数详解：https://blog.csdn.net/chenlove1/article/details/83032767
Column、Row参数详解https://blog.csdn.net/chenlove1/article/details/83867875
这几篇参数解析都是同一个人写的，有兴趣的可以去他主页看看其他的文章。
由于我搞到了一个华为平板，所以尝试了一下外置的终端显示，效果还可以。配置外部华为平板的教程可以看这里https://zhidao.baidu.com/question/1732104264284889147.html，我的整个过程还算顺利，换了一条数据线就可以连上了，连上了之后我的电脑那里会出现设备，出现了就代表成功了。
布局方式
在flutter里，一般是通过放置Widget进行布局，种类有很多，根据入门教程说，最常见的是Row（行排列），和Column（列排列）。
比较有意思的是，行排列+列排列就可以组成出我们看到的好看的布局。
简而言之就是在行里放一些列或者是在列里面放一些行，再往这个自类当中填充一些文字、图片、表单之类的子元件，设置好间隔和布局就完成了。
我们先来看一下上面那个有三个图标的小方块里的构造，首先它的外部是一个container，这个container可以决定了这个界面的位置，在container外部可以通过pandding参数增加一圈边框，也就是空白的部分。
container里面可以放各种各样的东西，所以我们在设计一个东西之前，得先在脑子里或者电脑上把这个设计给画出来，然后再按照这个设计划分成行、列或者是其他的排列方法。
最后，这个根节点的container又隶属于左边的Column，总的来说就是一个套娃关系。
在最后展示作品之前，还有一个东西是需要知道的，如果我们想在界面上输入文本进行交互，应该怎么做呢？flutter提供了一个Textfield的功能，详情请见https://flutterchina.club/text-input/
作品展示
通过之前所学的知识呢，我们就可以做一个简单的登录界面了。接下来我从上到下讲解一下这个程序。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'icon.dart';
void main() => runApp(new pp());
class pp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: ppHome(),
);
}
}
首先dart的文件只能通过main函数默认进行调用，所以程序里要有一个main函数，调用的一般是类，类里面的build函数会在调用类的时候执行，所以把我们要用的函数放置这里面就好了，一般会通过return+函数的方式直接返回。MaterialApp是flutter自带的一种生成app的方式，比较适合新手使用，里面大部分的功能都已经支持了。
class ppHome extends StatefulWidget {
@override
createState() => new ppState();
}
class ppState extends State<ppHome> {
final TextEditingController _name = new TextEditingController();
final TextEditingController _secret = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
decoration: new BoxDecoration(
// color: Colors.lightGreen,
),
margin: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
height: 800,
padding: new EdgeInsets.all(0),
child: new Row(mainAxisAlignment: MainAxisAlignment.start, children: [
new Container(
margin: new EdgeInsets.fromLTRB(100.0, 10.0, 10.0, 100.0),
width: 400,
height:200,
child: new Image.asset('images/3.jpg'),
// color: Colors.blue,
),
new Container(
margin: new EdgeInsets.fromLTRB(300.0, 80.0, 10.0, 10.0),
width: 200,
height: 300,
// color: Colors.red,
child: inform(),
),
]),
));
}
开头的那个类转换就是我们之前提到的，如果需要对一个StatefulWidget进行转换，就需要设置一个State的类，一开始先定义两个变量，保存用户名跟密码，然后同样的也是调用里面的build函数。
Scaffold是MaterialApp里的一个构件（widget），通过它可以很方便的生成一个界面。
Widget inform() {
return (new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
new Container(
width: 200,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
new Text(
'Name:',
textAlign: TextAlign.left,
style: new TextStyle(fontSize: 24),
),
new TextField(
controller: _name,
style: new TextStyle(color: Colors.grey, fontSize: 21),
decoration: new InputDecoration(
hintText: 'your name',
),
),
new Text('Secret:',
textAlign: TextAlign.left,
style: new TextStyle(fontSize: 24)),
new TextField(
controller: _secret,
style: new TextStyle(color: Colors.grey, fontSize: 21),
decoration: new InputDecoration(
hintText: 'your secret',
),
),
new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text('What you typed'),
content: new Container(
width: 300,
height: 150,
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Container(
child: new Column(
children: <Widget>[
new Text('name:'+_name.text,
style:new TextStyle(fontSize: 21)),
new Text('secret:'+_secret.text,
style:new TextStyle(fontSize: 21)),
],
)),
],
),
),
),
);
},
child: new Text('确定'),
),
],
),
),
],
));
}
}
这一块比较长，是右边那个用户名和密码，我把它单独分成了一个widget，因为如果里面嵌套太多层会影响视觉观感。
基本上就是一些Container和Row以及Column还有Textfield的组合了，基本上跟搭积木没有什么区别，具体想实现什么效果可以在遇到问题的时候查询最顶上那些链接。
一个小tips：crossAxisAlignment: CrossAxisAlignment.start是改变左右的， mainAxisAlignment: MainAxisAlignment.start，是改变上下的。
网友评论