Row水平布局

void main() => runApp(MaterialApp(title: "包裝控件",home: LayoutDemo(),));class LayoutDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {Widget packedRow = Row(mainAxisSize: MainAxisSize.min,children: <Widget>[Icon(Icons.star, color: Colors.green[500]),Icon(Icons.star, color: Colors.green[500]),Icon(Icons.star, color: Colors.green[500]),Icon(Icons.star, color: Colors.black),Icon(Icons.star, color: Colors.black),],);return Scaffold(appBar: AppBar(title: Text("Row"),),body: packedRow,);} }

運行效果：

void main() => runApp(MaterialApp(title: "包裝控件",home: LayoutDemo(),));class LayoutDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("水平布局"),),body: Row(children: <Widget>[const FlutterLogo(),const Text("您的預約訂單已提交，如需修改或取消，請至我的-我的訂單中操作"),Icon(Icons.sentiment_very_satisfied)],),);} }

出現警告：

expanded：

class LayoutDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("水平布局"),),body: Row(children: <Widget>[const FlutterLogo(),Expanded(child: Text("您的預約訂單已提交，如需修改或取消，請至我的-我的訂單中操作")),Icon(Icons.sentiment_very_satisfied)],),);} }

自動換行效果：

column垂直布局

void main() => runApp(MaterialApp(title: "包裝控件",home: LayoutDemo(),));class LayoutDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("垂直布局"),),body: Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: <Widget>[Text('We move under cover and we move as one'),Text('Through the night, we have one shot to live another day'),Text('We cannot let a stray gunshot give us away'),Text('We will fight up close, seize the moment and stay in it'),Text('It’s either that or meet the business end of a bayonet'),Text('The code word is ‘Rochambeau,’ dig me?'),Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),],),);} }

運行效果：

• 主軸mainAxisSize,次軸crossAxisAlignment，水平布局主軸為X軸，次軸為Y軸，垂直布局主軸為Y軸，次軸為X軸

Stack布局

• 按順序，前面的在底部后面的在上部
• alignment: const FractionalOffset(0.5, 0.9),參數為X軸，Y軸偏移比例

void main() => runApp(MaterialApp(title: "Stack層疊布局示例",home: MyApp(),));class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var stack = new Stack(alignment: const FractionalOffset(0.5, 0.9),children: <Widget>[new CircleAvatar(backgroundImage: new AssetImage("images/14.jpg"),radius: 100,),new Container(decoration: new BoxDecoration(color: Colors.black38),child: new Text("hello,Trump",style: new TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),),)],);return Scaffold(appBar: AppBar(title: Text("Stack層疊布局示例"),),body: new Center(child: stack));} }

運行效果：

層疊定位布局
絕對定位，偏移制定像素值

void main() => runApp(MaterialApp(title: "層疊定位布局示例",home: MyApp(),));class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("層疊定位布局示例"),),body: new Stack(children: <Widget>[new Image.network("https://pics2.baidu.com/feed/a8ec8a13632762d0312450694888b5fe503dc6bc.png?token=9864e38c2ceab51b62727dc9d77e264a&s=7C96749E84E876AC7836DD6003002039"),new Positioned(left: 100,top: 200,child: new Text("Hello,Trump",style: new TextStyle(fontSize: 20, fontFamily: "Serif", color: Colors.black),))],));} }

運行效果：

card布局

void main() => runApp(MaterialApp(title: "Card布局示例",home: MyApp(),));class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var card = new SizedBox(height: 250,child: new Card(child: new Column(children: <Widget>[new ListTile(title: new Text("北京市海淀區高梁橋斜街39號",style: new TextStyle(fontWeight: FontWeight.w300),),subtitle: new Text("交大知行大廈"),leading: new Icon(Icons.directions_car,color:Colors.lightBlue,),),new Divider(),new ListTile(title: new Text("北京市海淀區高梁橋斜街39號",style: new TextStyle(fontWeight: FontWeight.w300),),subtitle: new Text("交大知行大廈"),leading: new Icon(Icons.directions_car,color:Colors.lightBlue,),),],),),);return Scaffold(appBar: AppBar(title: Text("Card布局示例"),),body: new Center(child: card));} }

運行效果：
滑動布局

void main() => runApp(MaterialApp(title: "滑動布局示例",home: MyApp(),));class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("滑動布局示例"),),body: new ListView(children: <Widget>[new Center(child: new Text("九寨溝",style: new TextStyle(fontSize: 30),),),new Center(child: new Text("五花海自然風景區",style: new TextStyle(fontSize: 16),),),new Center(child: new Text('''九寨溝五花海 [1] 海拔2472米，水深5米，面積9萬平方米，被譽為“九寨溝一絕”和“九寨精華”，在珍珠灘瀑布之上，熊貓湖的下部于日則溝孔雀河上游的盡頭。五花海四周的山坡，入秋后便籠罩在一片絢麗的秋色中，色彩豐富，姿態萬千。由于海底的鈣華沉積和各種色澤艷麗的藻類，以及沉水植物的分布差異，使一湖之中形成了許多斑斕的色塊，寶藍、翠綠、橙黃、淺紅，似無數塊寶石鑲嵌成的巨形佩飾，珠光寶氣，雍容華貴。金秋時節，湖畔五彩繽紛的彩林倒映在湖面，與湖底的色彩混合成了一個異彩紛呈的彩色世界。其色彩十分豐富，甚至超出了畫家的想象力。黃昏時分，火紅的晚霞映入水中，湖水似金星飛濺，彩波粼粼，綺麗無比。從老虎嘴俯瞰它的全貌，儼然是一只羽毛豐滿的開屏孔雀。長海流入五花海的水在經過石灰巖巖脈時，使水中帶入了大量的石灰鈣華物質。這些含有鈣華物質的白色砂粒有很強的過濾作用，又像是熱帶珊瑚海中的沙子一樣堆積著，連這里的藻類也因為受到了鈣華物質的影響而變成白色。陽光一照，海子更為迷離恍惚，絢麗多姿，一片光怪陸離，使人進入了童話境地五花海是九寨溝諸景點中最精彩一個。四周的山坡，入秋后便籠罩在一片絢麗的秋色中，色彩豐富，姿態萬千，獨霸九寨。五花海的彩葉大半集中在出水口附近的湖畔，一株株彩葉交織成錦，如火焰流金。含碳酸鈣質的池水，與含不同葉綠素的水生群落，在陽光作用下，幻化出繽紛色彩，一團團、一塊塊，有湛藍、有墨綠、有翠黃。岸上林叢，赤橙黃綠倒映池中，一片色彩斑斕，與水下沉木、植物相互點染，其美尤妙，故得名五花海。九寨人說：五花海是神池，它的水灑向哪兒，哪兒就花繁林茂，美麗富饒。五花海的底部景觀妙不可言，湖水一邊是翠綠色的，一邊是湖綠色的，湖底的枯樹由于鈣化，變成一叢叢燦爛的珊瑚，在陽光的照射下，五光十色，非常迷人。九寨溝五花海 [1] 海拔2472米，水深5米，面積9萬平方米，被譽為“九寨溝一絕”和“九寨精華”，在珍珠灘瀑布之上，熊貓湖的下部于日則溝孔雀河上游的盡頭。五花海四周的山坡，入秋后便籠罩在一片絢麗的秋色中，色彩豐富，姿態萬千。由于海底的鈣華沉積和各種色澤艷麗的藻類，以及沉水植物的分布差異，使一湖之中形成了許多斑斕的色塊，寶藍、翠綠、橙黃、淺紅，似無數塊寶石鑲嵌成的巨形佩飾，珠光寶氣，雍容華貴。金秋時節，湖畔五彩繽紛的彩林倒映在湖面，與湖底的色彩混合成了一個異彩紛呈的彩色世界。其色彩十分豐富，甚至超出了畫家的想象力。黃昏時分，火紅的晚霞映入水中，湖水似金星飛濺，彩波粼粼，綺麗無比。從老虎嘴俯瞰它的全貌，儼然是一只羽毛豐滿的開屏孔雀。長海流入五花海的水在經過石灰巖巖脈時，使水中帶入了大量的石灰鈣華物質。這些含有鈣華物質的白色砂粒有很強的過濾作用，又像是熱帶珊瑚海中的沙子一樣堆積著，連這里的藻類也因為受到了鈣華物質的影響而變成白色。陽光一照，海子更為迷離恍惚，絢麗多姿，一片光怪陸離，使人進入了童話境地五花海是九寨溝諸景點中最精彩一個。四周的山坡，入秋后便籠罩在一片絢麗的秋色中，色彩豐富，姿態萬千，獨霸九寨。五花海的彩葉大半集中在出水口附近的湖畔，一株株彩葉交織成錦，如火焰流金。含碳酸鈣質的池水，與含不同葉綠素的水生群落，在陽光作用下，幻化出繽紛色彩，一團團、一塊塊，有湛藍、有墨綠、有翠黃。岸上林叢，赤橙黃綠倒映池中，一片色彩斑斕，與水下沉木、植物相互點染，其美尤妙，故得名五花海。九寨人說：五花海是神池，它的水灑向哪兒，哪兒就花繁林茂，美麗富饒。五花海的底部景觀妙不可言，湖水一邊是翠綠色的，一邊是湖綠色的，湖底的枯樹由于鈣化，變成一叢叢燦爛的珊瑚，在陽光的照射下，五光十色，非常迷人。''',style: new TextStyle(fontSize: 14),),),],));} }

運行效果：

appBar

import 'package:flutter/material.dart';void main() => runApp(MaterialApp(title: "包裝控件",home: DidiSample(),));class DidiSample extends StatefulWidget {@overrideState<StatefulWidget> createState() => _DidiSampleState(); }class _DidiSampleState extends State<DidiSample> {Choice _selectedChoice = choices[0];void _select(Choice choice) {setState(() {_selectedChoice = choice;});}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("appbar"),actions: <Widget>[IconButton(icon: Icon(choices[0].icon),onPressed: () {_select(choices[0]);}),IconButton(icon: Icon(choices[1].icon),onPressed: () {_select(choices[1]);}),PopupMenuButton<Choice>(onSelected: _select,itemBuilder: (BuildContext context) {return choices.skip(2).map<PopupMenuItem<Choice>>((Choice choice) {return PopupMenuItem(value: choice, child: Text(choice.title));}).toList();}),],),body: Padding(padding: const EdgeInsets.all(16),child: ChoiceDidi(choice: _selectedChoice)),));} }class ChoiceDidi extends StatelessWidget {final Choice choice;const ChoiceDidi({Key key, this.choice}) : super(key: key);@overrideWidget build(BuildContext context) {final TextStyle textStyle = Theme.of(context).textTheme.display1;return Card(color: Colors.white,child: Center(child: Column(mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Icon(choice.icon,size: 128,color: textStyle.color,),Text(choice.title,style: textStyle,)],),));} }class Choice {final String title;final IconData icon;const Choice({this.title, this.icon}); }const List<Choice> choices = <Choice>[Choice(title: '自駕', icon: Icons.directions_car),Choice(title: '自行車', icon: Icons.directions_bike),Choice(title: '乘船', icon: Icons.directions_boat),Choice(title: '公交車', icon: Icons.directions_bus),Choice(title: '火車', icon: Icons.directions_transit),Choice(title: '步行', icon: Icons.directions_walk), ];

運行效果：

void main() => runApp(MaterialApp(title: "包裝控件",home: _DidiSampleState(),));class _DidiSampleState extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: DefaultTabController(length: choices.length,child: Scaffold(appBar: AppBar(title: const Text('滴滴出行'),bottom: TabBar(tabs: choices.map((Choice choice) {return Tab(text: choice.title,icon: Icon(choice.icon),);}).toList()),),body: TabBarView(children: choices.map((Choice choice) {return Padding(padding: const EdgeInsets.all(16),child: ChoiceDidi(choice: choice,),);}).toList()),)));} }class ChoiceDidi extends StatelessWidget {final Choice choice;const ChoiceDidi({Key key, this.choice}) : super(key: key);@overrideWidget build(BuildContext context) {final TextStyle textStyle = Theme.of(context).textTheme.display1;return Card(color: Colors.white,child: Center(child: Column(mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Icon(choice.icon,size: 128,color: textStyle.color,),Text(choice.title,style: textStyle,)],),));} }class Choice {final String title;final IconData icon;const Choice({this.title, this.icon}); }const List<Choice> choices = <Choice>[Choice(title: '自駕', icon: Icons.directions_car),Choice(title: '自行車', icon: Icons.directions_bike),Choice(title: '乘船', icon: Icons.directions_boat),Choice(title: '公交車', icon: Icons.directions_bus),Choice(title: '火車', icon: Icons.directions_transit),Choice(title: '步行', icon: Icons.directions_walk), ];

運行效果：

總結

以上是生活随笔為你收集整理的Flutter学习（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。