Flutter布局与定位详解-优快云博客

1)ListView：

示意如下:

主要用于新闻和用户中心

2）GridView：

示意如下：主要用于商品列表，应用列表

GridView.count实现网格布局：拥有一行配置元素数量参数crossAxisCount: 4,

GridView.extend实现网格布局,与上面差别在于参数不同

GridView.builder实现动态网格布局

1）GridView.count

GridView.count(
       crossAxisCount: 4,
       children: const <Widget> [
         Icon(Icons.pedal_bike),

2)GridView.extend

return GridView.extent(
      maxCrossAxisExtent: 40,//最大长度
      children: const [
Icon(Icons.pedal_bike),

间距

只想要间距，就用padding,不必用container

return const Padding( //padding就是实现间距

padding: EdgeInsets.all(20),

child: Text("hello"),

Row：让多个元素排列在一行

默认宽度自适应，占满上层组件赋予的整行

一般其上会有container

注意占满屏幕的两个方法：

//width: 4000,//非常大，就占满了整个屏幕
width: double.infinity,//获取屏幕整个宽度

Widget build(BuildContext context) {
     return Container(
       //width: 4000,//非常大，就占满了整个屏幕
       width: double.infinity,//获取屏幕整个宽度
       //height: 7000,
       height: double.infinity,
       color: Colors.black54,
       child: Row(//外部没有container，则是自适应的
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             crossAxisAlignment: CrossAxisAlignment.start,
             children:[
              IconContainer(Icons.holiday_village,color: Colors.blue,),
               IconContainer(Icons.account_box,color: Colors.orange,),
               IconContainer(Icons.alarm,color: Colors.blue,),
      ],
  
     )
           );

进入infinity可以看到，这是无穷大，还有maxFinite可以用

abstract class double extends num {
  static const double nan = 0.0 / 0.0;
  static const double infinity = 1.0 / 0.0;
  static const double negativeInfinity = -infinity;
  static const double minPositive = 5e-324;
  static const double maxFinite = 1.7976931348623157e+308;

Column：让多个元素排列在一列

默认高度自适应占满上层组件赋予的整列

Flex:

Row和Column都继承于flex组件

注意如下flex要放在child前，不然第二个expanded 提示修改

flex:决定了占几份，如果给Iconcontainer设置宽度是没有效果的

 return Row(
    
            children:[
              Expanded(
                flex: 1,
                child: IconContainer(Icons.holiday_village,color: Colors.blue,),//占一份
                
                ),
              Expanded(
                child:  IconContainer(Icons.account_box,color: Colors.orange,),
                flex: 2,//占2份
                
                ),

也可以将return row改成：

   return Flex(//这里也可以用cloumn或者row,用了flex,就要指定direction
            //direction: Axis.horizontal,//水平分配
            direction: Axis.vertical,

比如要实现右边固定宽度，左边自适应

那么对于右边元素，不要设置flex,就会采用其本身宽度

Stack &Positioned:绝对定位

stack:可以堆在一起

positioned：指定两个坐标，相对外层容器

如果position里面是row,还需要制定宽度高度，否则报错，控制台无限循环

return Container(

      height: 400,

      width: 300,

      color: Colors.blue,

          child: Stack(

            children: [

              Positioned(

                left: 10,

                bottom: 10, //代表底部左侧

                child: Container(

                 width: 100,

                height: 100,

                 color: Colors.yellow,



              ),

              ),

              const Positioned(

                right: 0,

                top: 190,

                child:  Text("hello 1116"),

              ),

获取设备高度宽度

Widget build(BuildContext context) {
    final size=MediaQuery.of(context).size;//不能用infinite,获取设备宽度和高度
     return Stack(
     children: [
     ListView(
      padding: const EdgeInsets.only(top: 50),//避免顶部被下面的导航遮盖
       children: const  [
        ListTile(title:Text("i am liebiao1") ),
        ListTile(title:Text("i am liebiao2")) ,
        ListTile(title:Text("i am liebiao3") ),
        ListTile(title:Text("i am liebiao4") , ),
         ListTile(title:Text("i am liebiao5") , ),
          ListTile(title:Text("i am liebiao6") , ),
           ListTile(title:Text("i am liebiao7") , ),
         ListTile(title:Text("i am liebiao8") , ),
          ListTile(title:Text("i am liebiao9") , ),
           ListTile(title:Text("i am liebiao10") , ),
         ListTile(title:Text("i am liebiao11") , ),
          ListTile(title:Text("i am liebiao12") , ),
             ListTile(title:Text("i am liebiao13") , ),
          ListTile(title:Text("i am liebiao14") , ),
           ListTile(title:Text("i am liebiao15") , ),
         ListTile(title:Text("i am liebiao16") , ),
          ListTile(title:Text("i am liebiao17") , ),


       ],

     ),
     
     Positioned(
      left: 0,
      top:0,
      width: size.width,//获取设备宽度
      height: 44,
      child:Container(
          alignment: Alignment.topLeft,
          height: 44,
          color: Colors.black,
          child: const Text("二级导航",
                     style:TextStyle(color: Colors.white) ,),
        ),
      
      
      ),

    ],


     );
  }

Stack&Align

Align也可以作为元素

 return Container(
      width: 300,
      height: 300,
      color: Colors.red,
      child: const Align(   //Align 如果要居中也可以直接用center
        alignment: Alignment.bottomRight,
       child:Text("你好，i7i8i9 "),

      )

alignment: Alignment(-1, 1),也可以这样设置（）里面的是x,y单位不是像素

-1,1左侧底部

1,1 右侧底部

实现单行居左居右，

row+align无效果，只能用stack+align

return Stack(
     children: const [
        Align(alignment: Alignment.topLeft,child: Text("收藏") ,),
       Align(alignment: Alignment.topRight,child: Text("购买") ,),

     ],
     );

实现方法2：

cloumn+container+stack+Align

因为只用了宽度高度，container可以改为sizedbox

 return Column(
       children: [
        Container(
       width: double.infinity,
       height: 40,
       child: Stack(
     children: const [
        Align(alignment: Alignment.topLeft,child: Text("收藏") ,),
       Align(alignment: Alignment.topRight,child: Text("购买") ,),

     ],
     ),

        )

       ],


     )

实现方法3：更容易定位到具体位置

cloumn+sizedbox+stack+positioned

stack上层套包裹一层，要么是有宽高的box或最外层，不能直接是column

return Column(
       children: [
        SizedBox(
       width: double.infinity,
       height: 40,
       child: Stack(
     children: const [
        Align(alignment: Alignment.topLeft,child: Text("收藏") ,),
       Align(alignment: Alignment.topRight,child: Text("购买") ,),

     ],
     ),

        ),
         SizedBox(
       width: double.infinity,
       height: 40,
       child: Stack(
     children: const [
      Positioned(
        left: 10,
        child:  Text("收藏")),
       Positioned(
        right: 10,
        child:  Text("购买")),

     ],
     ),

        )

       ],


     )

宽高比

 return AspectRatio(
      aspectRatio: 3/1,//宽度是屏幕宽度，高度是容器一半,用在图片上较多
      child: Container(
        color: Colors.red,
      
      ),