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

待我称王封你为后i 2023-07-16 03:48 17阅读 0赞

##### 入口文件 #####

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,
              ),
            ],
          ),
        );
      }
    }