前端入門flutter-08Flutter頁面佈局 Paddiing Row Column Expanded元件詳解

阿新 • • 發佈：2021-01-20

　　拋開邏輯不說，具有好的佈局能力才可以做到符合設計圖符合上級口味的介面，此篇亦是佈局講解：

 1 import 'package:flutter/material.dart';
 2 import 'res/listData.dart';
 3 
 4 void main(){
 5   runApp(MyApp());
 6 }
 7 //
 8 class MyApp extends StatelessWidget{
 9   @override
10   Widget build(BuildContext context) {
11     // TODO: implement build
12 
     return MaterialApp(
13       home: Scaffold(
14       appBar: AppBar(
15         title: Text('Padding Row Column Expanded'),
16       ),
17         body: HomeContent(),
18       ),
19     );
20   }
21 }
22 
23 //Padding元件
24 class HomeContent extends StatelessWidget{
25   @override
26   Widget build(BuildContext context) {
 
27     // TODO: implement build
28     return Padding(
29         padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
30         child: GridView.count(
31             crossAxisCount: 2,
32           childAspectRatio: 1.7,
33           children:<Widget> [
34             Padding(
35               padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
 
36               child: Image.network("https://www.itying.com/images/flutter/1.png",
37                   fit: BoxFit.cover),
38             ),
39             Padding(
40               padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
41               child: Image.network("https://www.itying.com/images/flutter/1.png",
42                   fit: BoxFit.cover),
43             ),
44             Padding(
45               padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
46               child: Image.network("https://www.itying.com/images/flutter/1.png",
47                   fit: BoxFit.cover),
48             ),
49             Padding(
50               padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
51               child: Image.network("https://www.itying.com/images/flutter/1.png",
52                   fit: BoxFit.cover),
53             ),
54             Padding(
55               padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
56               child: Image.network("https://www.itying.com/images/flutter/1.png",
57                   fit: BoxFit.cover),
58             ),
59           ],
60         ),
61     );
62   }
63 }
//封裝的icon

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) {
    // TODO: implement build
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white),
      ),
    );
  }
}

效果如下：

Row水平佈局元件:

 1 //Row水平佈局元件:
 2 /*
 3     mainAxisAlignment 主軸的排列方式
 4     crossAxisAlignment次軸的排列方式
 5     children 元件子元素
 6  */
 7 class HomeContent2 extends StatelessWidget{
 8   @override
 9   Widget build(BuildContext context) {
10     // TODO: implement build
11     return Container(
12       height: 800.0,
13       width: 500.0,
14       color: Colors.pink,
15       child: Row(
16         mainAxisAlignment:MainAxisAlignment.spaceEvenly,
17         crossAxisAlignment: CrossAxisAlignment.start,
18         children: <Widget>[
19           IconContainer(Icons.home,color:Colors.blue),
20           IconContainer(Icons.search,color:Colors.orange),
21           IconContainer(Icons.select_all,color:Colors.red)
22         ],
23       ),
24     );
25   }
26 }

　　效果圖：

Column 垂直佈局元件：

 1 /*
 2 Column 垂直佈局元件：
 3 mainAxisAlignment 主軸的排列方式
 4 crossAxisAlignment 次軸的排列方式
 5 children 元件子元素；
 6 
 7 */
 8 class HomeContent3 extends StatelessWidget{
 9   @override
10   Widget build(BuildContext context) {
11     // TODO: implement build
12     return Container(
13       height: 800.0,
14       width: 400.0,
15       color: Colors.pink,
16       child: Column(
17           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
18           crossAxisAlignment:CrossAxisAlignment.start,
19           children: <Widget>[
20             IconContainer(Icons.home,color:Colors.blue),
21             IconContainer(Icons.search,color: Colors.orange),
22             IconContainer(Icons.select_all,color:Colors.red)
23           ],
24       ),
25     );
26   }
27 }

　　效果圖：

Expanded 類似於css的flex佈局：

 1 //Expanded 類似於css的flex佈局
 2 class HomeContent4 extends StatelessWidget{
 3   @override
 4   Widget build(BuildContext context) {
 5     // TODO: implement build
 6     return Row(
 7       children: <Widget>[
 8         Expanded(
 9           flex: 1,
10             child: IconContainer(Icons.home,color: Colors.orange),
11         ),
12         IconContainer(Icons.search,color: Colors.blue)
13         
14       ],
15     );
16   }
17 }

　　效果圖：

　　綜合使用：

 1 class comprehensive extends StatelessWidget{
 2   @override
 3   Widget build(BuildContext context) {
 4     // TODO: implement build
 5     return Column(
 6       children:<Widget> [
 7         Row(
 8           children: <Widget>[
 9             Expanded(
10               child:Container(
11                 height: 200.0,
12                 color: Colors.black26,
13                 child: Text("你好 demo"),
14               ),
15             )
16           ],
17         ),
18           SizedBox(height: 10.0,),
19         Row(
20           children:<Widget>[
21 
22 
23             Expanded(
24               flex: 2,
25                 child:Container(
26                   height:180.0,
27                     child:Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover)
28                 )
29             ),
30             SizedBox(width: 10.0),
31             Expanded(
32                 flex: 1,
33                 child:Container(
34                   height: 180.0,
35                   child:ListView(
36 
37 
38                     children:<Widget> [
39                       Container(
40                       height:85.0,
41                       child:Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover),
42     ),
43                       SizedBox(height: 10.0),
44                       Container(
45                         height:85.0,
46                         child:Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover),
47                       ),
48                     ],
49                   )
50                 )
51             ),
52           ]
53         )
54       ],
55     );
56   }
57 }