Flutter-布局_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,
      
      ),