flutter 内边距组件padding、水平组件Row、垂直组件Column、自适应组件Expanded、自适应占据空间组件Spacer()

逃离我推掉我的手 2021-07-25 00:01 475阅读 0赞

内边距组件:
    设置组件的内边距
    	Padding(
    		padding:EdgeInsets.all(n),
    		child:组件
    	)
    
    水平组件:
    子组件全都水平排列
    	Row(
    		mainAxisAlignment: MainAxisAlignment.spaceEvenly, 水平方向的布局方式,spaceEvenly元素与元素之间,首尾元素与父容器的距离均匀分配
            crossAxisAlignment: CrossAxisAlignment.center,  垂直方向布局方式
            children: <Widget>[...]    //Lisi<Widget>类型的容器
    	)
    	
    垂直组件:
    子组件全都垂直排列
    内部不能放置ListView组件
    	Column(
    		mainAxisAlignment: MainAxisAlignment.spaceEvenly,  垂直方向的布局方式,spaceEvenly元素与元素之间,首尾元素与父容器的距离均匀分配
            crossAxisAlignment: CrossAxisAlignment.center,  水平方向布局方式
            children: <Widget>[...]    //Lisi<Widget>类型的容器
    	)
    
    自适应组件:
    类似flex布局中设置flex的值使得元素按占比布局
    	Expanded(
    		flex:n,   子组件占父元素的比例
    		child:组件
    	)
    	
    自适应占据控件组件Spacer()
    	可以用于Column等组件中,用于按照自适应组件的方式占据空间
    		Spacer();   内部就是返回一个Expanded的SizedBox的空间布局
    		Spacer(flex:n);

代码示例:

import "package:flutter/material.dart";
    
    void main()
    { 
      runApp(App());
    }
    
    class App extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
          home:Scaffold(appBar: AppBar(title: Text("hh")),
            body:Home4()
          )
          ,);
      }
    }
    
    class Home extends StatelessWidget{ 
      List<Widget> _get()
    { 
      List<Widget> list=new List();
      for(int i=0;i<10;i++)
      { 
        list.add(Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,));
      }
    
      return list;
    }
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return GridView.count(
          crossAxisCount: 2,
          children:<Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(10,10,10,20),  
              child:Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue) ,
            ),
            Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
            Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
            Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
            Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
            Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
            Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
    
          ],
        );
      }
    }
    
    class Home2 extends StatelessWidget{ 
      List<Widget> _get()
    { 
      List<Widget> list=new List();
      for(int i=0;i<10;i++)
      { 
        list.add(Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,));
      }
    
      return list;
    }
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, //水平方向的布局方式,spaceEvenly元素与元素之前,首尾元素与父容器的距离均匀分配
            crossAxisAlignment: CrossAxisAlignment.center, //垂直方向布局方式
            children: <Widget>[
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),          
            ],
          );
      }
    }
    
    class Home3 extends StatelessWidget{ 
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, //垂直方向的布局方式,spaceEvenly元素与元素之前,首尾元素与父容器的距离均匀分配
            crossAxisAlignment: CrossAxisAlignment.center, //水平方向布局方式
            children: <Widget>[
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),          
            ],
          );
      }
    }
    
    class Home4 extends StatelessWidget{ 
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Row(
        
            children: <Widget>[
              Expanded(
                flex:1,
                child:Container(
                  height: 100.0,
                  width: 100.0,
                  color:Colors.blue,
                  child: Icon(Icons.home,size:32,color:Colors.white),
                  ),  
              ),
    
              Expanded(
                flex:2,
                child:Container(
                  height: 100.0,
                  width: 100.0,
                  color:Colors.orange,
                  child: Icon(Icons.home,size:32,color:Colors.white),
                  ),  
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color:Colors.blue,
                child: Icon(Icons.home,size:32,color:Colors.white),
              ),       
            ],
          );
      }
    }