1. Paddiing 組件
在 html 中常見的布局標簽都可以使用 padding 屬性，但是 Flutter 中很多 Widget 是沒有 padding 屬 性，這個時候我們可以用 Padding 組件處理容器與子元素直接的間距。
常見屬性：
1. padding 內邊距值；
2. child 子組件；
代碼示例：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽離成一個單獨的組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 導航條
appBar:AppBar(title:Text('Flutter App')),
// 主體
body:HomeContent(),
),
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// Padding內邊距的使用
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Padding(
// 給整個容器右邊添加內邊距
padding: EdgeInsets.fromLTRB(0,0,10,0),
child: GridView.count(
// 定義一行幾列
crossAxisCount:2,
// 長寬比例
childAspectRatio:1.7,
children:<Widget>[
Padding(
// 定義左、上內邊距
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
// 子元素
child: Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover)
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network("http://www.itying.com/images/flutter/2.png",fit: BoxFit.cover)
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network("http://www.itying.com/images/flutter/3.png",fit: BoxFit.cover)
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network("http://www.itying.com/images/flutter/4.png",fit: BoxFit.cover)
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network("http://www.itying.com/images/flutter/3.png",fit: BoxFit.cover)
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network("http://www.itying.com/images/flutter/2.png",fit: BoxFit.cover)
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network("http://www.itying.com/images/flutter/1.png",fit: BoxFit.cover)
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network("http://www.itying.com/images/flutter/4.png",fit: BoxFit.cover)
)
],
)
);
}
}
需要注意的是，以上圖片的間隙由內外兩層內邊距組合使用而得出來的。
2. Row 組件
Row 組件主要用于需要水平布局的情況。
常見屬性：
1. mainAxisAlignment 主軸的組件對齊方式；
2. crossAxisAlignment 次軸的組件對齊方式；
3. children 組件子元素；
代碼示例：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽離成一個單獨的組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 導航條
appBar:AppBar(title:Text('Flutter App')),
// 主體
body:HomeContent(),
),
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// Row水平布局組件的使用
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
// 寬度
width:500,
// 高度
height:500,
// 背景顏色
color:Colors.red,
// 水平布局組件
child: Row(
// 定義水平對齊的方式，類似于CSS里的flex-decration
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// 定義元素相對父容器的垂直對齊方式
crossAxisAlignment: CrossAxisAlignment.center,
// 子元素
children: <Widget>[
// 調用自定義的圖標組件傳參
IconContainer(Icons.search,color:Colors.black,size:40.0),
IconContainer(Icons.home,color:Colors.green,size:40.0),
IconContainer(Icons.select_all,color:Colors.blue,size:40.0)
],
)
);
}
}
// 定義傳入圖標的類
class IconContainer extends StatelessWidget{
double size = 32.0;
Color color = Colors.red;
IconData icon;
// 構造函數
IconContainer(this.icon,{this.color,this.size});
@override
Widget build(BuildContext context) {
return Container(
// 寬度
height:100.0,
// 高度
width:100.0,
// 背景顏色
color:this.color,
// 子元素
child:Center(
child: Icon(this.icon,size:this.size,color:Colors.white)
)
);
}
}
3. Column組件
Column 組件主要用于需要垂直布局的情況。
常見屬性：
1. mainAxisAlignment 主軸的組件對齊方式；
2. crossAxisAlignment 次軸的組件對齊方式；
3. children 組件子元素；
代碼示例：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽離成一個單獨的組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 導航條
appBar:AppBar(title:Text('Flutter App')),
// 主體
body:HomeContent(),
),
// 主題
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// Column垂直布局組件的使用
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
// 寬度
width:500,
// 高度
height:500,
// 背景顏色
color:Colors.red,
// 垂直布局組件
child: Column(
// 定義垂直對齊的方式，類似于CSS里的flex-decration
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// 定義元素相對父容器的水平對齊方式
crossAxisAlignment: CrossAxisAlignment.center,
// 子元素
children: <Widget>[
// 調用自定義的圖標組件傳參
IconContainer(Icons.search,color:Colors.black,size:40.0),
IconContainer(Icons.home,color:Colors.green,size:40.0),
IconContainer(Icons.select_all,color:Colors.blue,size:40.0)
],
)
);
}
}
4. Expanded組件
Expanded 類似 Web 開發中的Flex布局，可以用在 Row 和 Column 布局中以定義該子組件所占的百分比。
常見屬性：
1. flex 子組件占整個父組件比例；
2. child 子組件；
代碼示例：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽離成一個單獨的組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 導航條
appBar:AppBar(title:Text('Flutter App')),
// 主體
body:HomeContent(),
),
// 主題
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// Expanded組件的使用，定義一行中每個元素的百分比
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Row(
// 子元素
children: <Widget>[
Expanded(
flex:1,
child:IconContainer(Icons.search,color:Colors.red,size:40.0),
),
Expanded(
flex:2,
child:IconContainer(Icons.home,color:Colors.black,size:40.0),
),
Expanded(
flex:1,
child:IconContainer(Icons.select_all,color:Colors.green,size:40.0),
),
],
);
}
}
// 定義傳入圖標的類
class IconContainer extends StatelessWidget{
double size = 32.0;
Color color = Colors.red;
IconData icon;
// 構造函數
IconContainer(this.icon,{this.color,this.size});
@override
Widget build(BuildContext context) {
return Container(
// 寬度
height:100.0,
// 高度
width:100.0,
// 背景顏色
color:this.color,
// 子元素
child:Center(
child: Icon(this.icon,size:this.size,color:Colors.white)
)
);
}
}
效果圖如下：
利用Expanded實現一個左側固定，右側自適應的布局。
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽離成一個單獨的組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 導航條
appBar:AppBar(title:Text('Flutter App')),
// 主體
body:HomeContent(),
),
// 主題
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// Expanded組件實現左側固定寬度，右側自適應的布局
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Row(
// 子元素
children: <Widget>[
// 左側組件固定寬度
IconContainer(Icons.search,color:Colors.red,size:40.0),
// 右側組件自適應
Expanded(
// 自適應時值為1即可
flex:1,
child:IconContainer(Icons.select_all,color:Colors.green,size:40.0),
),
],
);
}
}
// 定義傳入圖標的類
class IconContainer extends StatelessWidget{
double size = 32.0;
Color color = Colors.red;
IconData icon;
// 構造函數
IconContainer(this.icon,{this.color,this.size});
@override
Widget build(BuildContext context) {
return Container(
// 寬度
height:100.0,
// 高度
width:100.0,
// 背景顏色
color:this.color,
// 子元素
child:Center(
child: Icon(this.icon,size:this.size,color:Colors.white)
)
);
}
}
效果圖如下：
5. 布局實例
實現下圖的布局：
代碼如下：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽離成一個單獨的組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 導航條
appBar:AppBar(title:Text('Flutter App')),
// 主體
body:HomeContent(),
),
// 主題
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// 布局實例
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child:Container(
height:180,
color:Colors.black,
child: Text('你好，Flutter'),
),
)
],
),
SizedBox(height:10),
Row(
children: <Widget>[
Expanded(
flex: 2,
child:Container(
height:180,
child:Image.network("http://www.itying.com/images/flutter/1.png",fit:BoxFit.cover)
)
),
SizedBox(width:10),
Expanded(
flex:1,
child:Container(
height:180,
child:ListView(
children: <Widget>[
Container(
height:85,
child:Image.network("http://www.itying.com/images/flutter/1.png",fit:BoxFit.cover)
),
SizedBox(height:10),
Container(
height:85,
child:Image.network("http://www.itying.com/images/flutter/2.png",fit:BoxFit.cover)
)
],
)
)
)
],
)
],
);
}