Flutter 组件之Padding、Row、 column、Expanded、Stack层叠 组件

入口文件

import 'package:flutter/material.dart';

void main() {
  runApp(HomeComponent());
}

class HomeComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.home),
          backgroundColor: Colors.blueGrey,
          title: Text("Padding(边距盒子) Row() column(),Expanded(flex布局) 组件"),
        ),
        body: StackGridLearn(),
      ),
    );
  }
}

padding组件

// padding组件
 class PaddingComLearn extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // TODO: implement build
     return GridView.count(
       crossAxisCount: 2,//列数
       children: <Widget>[
         Padding(//边距组件
             padding: EdgeInsets.fromLTRB(10, 10, 10, 10),//定义外部边距
             child: Image.network(//子元素存放
                 "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565001740&di=472870156f1538cdf5a0ce844236faf8&imgtype=0&src=http%3A%2F%2Fwww.tz365.cn%2Fuploads%2Fallimg%2Fc180201%2F151JE424514Z-291T4.jpg",
                 fit: BoxFit.cover)),
         Padding(
             padding: EdgeInsets.all(10),
             child: Image.network(
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565064097&di=30a26282b91ffb18b028f8e573e1b0fd&imgtype=0&src=http%3A%2F%2Fi1.mopimg.cn%2Fimg%2Ftt%2F2018-01%2F677%2F20180107183003683.jpg",
               fit: BoxFit.cover,
             )),
         Padding(
             padding: EdgeInsets.all(10),
             child: Image.network(
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d67d56c2e8d1bad1ac1833f044f9d611&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541124.jpg%3Fdown",
               fit: BoxFit.cover,
             )),
         Padding(
             padding: EdgeInsets.all(10),
             child: Image.network(
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d67d56c2e8d1bad1ac1833f044f9d611&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541124.jpg%3Fdown",
               fit: BoxFit.cover,
             )),
         Padding(
           padding: EdgeInsets.all(10),
           child: Image.network(
             "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d83ec35d9eba99e87c6d16783224b961&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541126.jpg",
             fit: BoxFit.cover,
           ),
         ),
         Padding(
             padding: EdgeInsets.all(10),
             child: Image.network(
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565064089&di=9b2990fa4a4d770ecd7e42060ebb2f8f&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F2cf5e0fe9925bc31d5343b9d5cdf8db1cb13704d.jpg",
               fit: BoxFit.cover,
             )),
             Padding(
             padding: EdgeInsets.all(10),
             child: Image.network(
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583650869447&di=6e72c936594e62e884a85ff56f08b1ff&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F30%2F20151130192227_V3TBJ.thumb.700_0.jpeg",
               fit: BoxFit.cover,
             )),
             Padding(
             padding: EdgeInsets.all(10),
             child: Image.network(
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583650869433&di=ee97e2de8c7ecfb04814dc0c554e5fad&imgtype=0&src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-06ca7dec67485c824ceb3c02d7a18980_hd.jpg",
               fit: BoxFit.cover,
             )),
             Padding(
             padding: EdgeInsets.all(10),
             child: Image.network(
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583650914666&di=2f2b4e59bc1ce3d18ebe5e3fa3b5b9db&imgtype=0&src=http%3A%2F%2Fimg.mingxing.com%2Fupload%2Fattach%2F2015%2F04%2F22-286657-JfH4wo.jpg",
               fit: BoxFit.cover,
             )),
       ],
     );
   }
 }

自定义图标组件

 class IconComponet extends StatelessWidget {
   Color color = Colors.pink;
   double size = 20.0;
   IconData icon;

   IconComponet(this.icon, this.size, this.color);

   @override
   Widget build(BuildContext context) {
     // TODO: implement build
     return Container(
         width: 100.0,
         height: 100.0,
         color: this.color,
         child: Center(
             child: Icon(this.icon, size: this.size, color: Colors.white)));
   }
 }

Column、Row、Expanded组件

//如果布局中宽度无法确定直接用Expanded flex:1就是独立的一个模块
 class RowGridLearn extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // TODO: implement build
     return Column(children: <Widget>[//列布局
       Container(
         width: 1000,
         height: 300,
         child: Padding(
             padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
             child: Image.network(
                 "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565001740&di=472870156f1538cdf5a0ce844236faf8&imgtype=0&src=http%3A%2F%2Fwww.tz365.cn%2Fuploads%2Fallimg%2Fc180201%2F151JE424514Z-291T4.jpg",
                 fit: BoxFit.cover)),
       ),
       SizedBox(height: 10,),//间隔盒子用来分割
       Container(
         width: 1060,
         height: 200,
         color: Colors.lightGreenAccent,
         child: Row(//水平布局组件
           //横向水平主轴flex布局的spaceBetween对齐方式一致
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             crossAxisAlignment: CrossAxisAlignment.center, //纵向
             children: <Widget>[//布局数组
               Expanded(//类似于flex
                 child: Padding(
                     child: Image.network(
                       "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583565064097&di=30a26282b91ffb18b028f8e573e1b0fd&imgtype=0&src=http%3A%2F%2Fi1.mopimg.cn%2Fimg%2Ftt%2F2018-01%2F677%2F20180107183003683.jpg",
                       fit: BoxFit.cover,
                     ),
                     padding: EdgeInsets.all(10)),
                 flex: 4,//显示比例
               ),
               // Expanded(
               //     child: IconComponet(Icons.hotel, 30.0, Colors.blueAccent),
               //     flex: 2),
               Expanded(
                   child: Container(
                     // padding: EdgeInsets.fromLTRB(0, 10, 10, 10),
                     height: 200,
                     child: Column(
                       children: <Widget>[
                         Container(
                           height: 100,
                           width: 400,
                           child:  Padding(child:Image.network(
                             "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d83ec35d9eba99e87c6d16783224b961&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541126.jpg",fit: BoxFit.cover,),padding: EdgeInsets.fromLTRB(0, 10, 10, 10),),
                         ),
                        Container(
                           height: 100,
                            width: 400,
                           child:  Padding(child:Image.network(
                             "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583564657479&di=d83ec35d9eba99e87c6d16783224b961&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F9%2F79%2F97d21541126.jpg",fit: BoxFit.cover,),padding: EdgeInsets.fromLTRB(0, 0, 10, 10),),
                         ),

                       ],
                     ),
                   ),
                   flex: 2),
             ]),
       ),
     ]);
   }
 }

层叠组件实现定位Align、Positioned

class StackGridLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,//对齐方式
      width: 400.0,
      height: 500,
      color: Colors.blueGrey,
      child: Stack(//层叠组件实现定位
        children: <Widget>[
          Align(
            alignment: Alignment.center,//对齐方位
//            alignment: Alignment(x, y),//具体值还可以写小数
            child: Icon(Icons.home, size: 40, color: Colors.white),
          ),
          Positioned(//定位没有alignment就像绝对定位直接使用
            child: Icon(
              Icons.search,
              size: 60,
              color: Colors.orange,
            ),
            top:250,//距顶位置
            left:190,//距左位置
          ),
          Positioned(//
            child: Icon(
              Icons.arrow_back,
              size: 60,
              color: Colors.pink,
            ),
            left: 10,
            bottom: -20,
          ),
        ],
      ),
    );
  }
}