前端入门flutter-08Flutter页面布局 Paddiing Row Column Expanded组件详解

　　抛开逻辑不说，具有好的布局能力才可以做到符合设计图符合上级口味的界面，此篇亦是布局讲解：

　　

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main(){
  runApp(MyApp());
}
//
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(
        title: Text('Padding Row Column Expanded'),
      ),
        body: HomeContent(),
      ),
    );
  }
}

//Padding组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    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("https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network("https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network("https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network("https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network("https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover),
            ),
          ],
        ),
    );
  }
}
//封装的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,
       100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white),
      ),
    );
  }
}

效果如下：

　　

Row水平布局组件:

//Row水平布局组件:
/*
    mainAxisAlignment 主轴的排列方式
    crossAxisAlignment次轴的排列方式
    children 组件子元素
 */
class HomeContent2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 800.0,
       500.0,
      color: Colors.pink,
      child: Row(
        mainAxisAlignment:MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          IconContainer(Icons.home,color:Colors.blue),
          IconContainer(Icons.search,color:Colors.orange),
          IconContainer(Icons.select_all,color:Colors.red)
        ],
      ),
    );
  }
}

　　效果图：

　　

Column 垂直布局组件：

/*
Column 垂直布局组件：
mainAxisAlignment 主轴的排列方式
crossAxisAlignment 次轴的排列方式
children 组件子元素；

*/
class HomeContent3 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 800.0,
       400.0,
      color: Colors.pink,
      child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment:CrossAxisAlignment.start,
          children: <Widget>[
            IconContainer(Icons.home,color:Colors.blue),
            IconContainer(Icons.search,color: Colors.orange),
            IconContainer(Icons.select_all,color:Colors.red)
          ],
      ),
    );
  }
}

　　效果图：

　　

　　

Expanded 类似于css的flex布局：

//Expanded 类似于css的flex布局
class HomeContent4 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      children: <Widget>[
        Expanded(
          flex: 1,
            child: IconContainer(Icons.home,color: Colors.orange),
        ),
        IconContainer(Icons.search,color: Colors.blue)
        
      ],
    );
  }
}

　　效果图：

　　

　　综合使用：
　　

class comprehensive extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children:<Widget> [
        Row(
          children: <Widget>[
            Expanded(
              child:Container(
                height: 200.0,
                color: Colors.black26,
                child: Text("你好 demo"),
              ),
            )
          ],
        ),
          SizedBox(height: 10.0,),
        Row(
          children:<Widget>[


            Expanded(
              flex: 2,
                child:Container(
                  height:180.0,
                    child:Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover)
                )
            ),
            SizedBox( 10.0),
            Expanded(
                flex: 1,
                child:Container(
                  height: 180.0,
                  child:ListView(


                    children:<Widget> [
                      Container(
                      height:85.0,
                      child:Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover),
    ),
                      SizedBox(height: 10.0),
                      Container(
                        height:85.0,
                        child:Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover),
                      ),
                    ],
                  )
                )
            ),
          ]
        )
      ],
    );
  }
}

　　效果图：

　　

　　当我们能完成这类布局就已经可以完成大部分设计需求了！