這篇文章主要講的是flutter對頁面的布置工作是如何進行的捆姜，先放一些資料鏈接曼玩。
Dart類函數(shù)詳解：http://www.reibang.com/p/44ae73a58ebc
Text參數(shù)詳解：https://blog.csdn.net/chenlove1/article/details/84574651
Container參數(shù)詳解：https://blog.csdn.net/chenlove1/article/details/83032767
Column、Row參數(shù)詳解https://blog.csdn.net/chenlove1/article/details/83867875
這幾篇參數(shù)解析都是同一個人寫的廉嚼，有興趣的可以去他主頁看看其他的文章谤专。
由于我搞到了一個華為平板牺丙，所以嘗試了一下外置的終端顯示堡牡，效果還可以抒抬。配置外部華為平板的教程可以看這里https://zhidao.baidu.com/question/1732104264284889147.html，我的整個過程還算順利晤柄，換了一條數(shù)據(jù)線就可以連上了瞧剖，連上了之后我的電腦那里會出現(xiàn)設備，出現(xiàn)了就代表成功了。
布局方式
在flutter里抓于，一般是通過放置Widget進行布局，種類有很多浇借，根據(jù)入門教程說捉撮，最常見的是Row（行排列），和Column（列排列）妇垢。
比較有意思的是巾遭，行排列+列排列就可以組成出我們看到的好看的布局。
簡而言之就是在行里放一些列或者是在列里面放一些行闯估，再往這個自類當中填充一些文字灼舍、圖片、表單之類的子元件涨薪，設置好間隔和布局就完成了骑素。
我們先來看一下上面那個有三個圖標的小方塊里的構造，首先它的外部是一個container刚夺，這個container可以決定了這個界面的位置献丑，在container外部可以通過pandding參數(shù)增加一圈邊框，也就是空白的部分侠姑。
container里面可以放各種各樣的東西创橄，所以我們在設計一個東西之前，得先在腦子里或者電腦上把這個設計給畫出來莽红，然后再按照這個設計劃分成行妥畏、列或者是其他的排列方法。
最后安吁，這個根節(jié)點的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函數(shù)默認進行調用，所以程序里要有一個main函數(shù)拉盾，調用的一般是類桨菜，類里面的build函數(shù)會在調用類的時候執(zhí)行，所以把我們要用的函數(shù)放置這里面就好了，一般會通過return+函數(shù)的方式直接返回倒得。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函數(shù)骗灶。
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的組合了轻黑，基本上跟搭積木沒有什么區(qū)別，具體想實現(xiàn)什么效果可以在遇到問題的時候查詢最頂上那些鏈接琴昆。
一個小tips：crossAxisAlignment: CrossAxisAlignment.start是改變左右的氓鄙， mainAxisAlignment: MainAxisAlignment.start，是改變上下的业舍。
