Flutter 布局

ListView 列表

动态列表

ListView.builder( itemCount:this.list.length,       itemBuilder:(context,index){ 
      returnListTile( leading:Icon(Icons.phone),              title:Text("${list[index]}"), 
      ); 
},
);

ListTitle

示例：

ListTile( 
    leading:Icon(Icons.phone),                    title:Text("ListTitle",style:TextStyle(fontSize:28.0),
    ), 
    subtitle:Text('subTitle'), 
    trailing:Icon(Icons.phone),
),

GridView 网格

GridView.count

class LayoutContent extends StatelessWidget{
List<Widget>_getListData(){ vartempList=listData.map((value){ 
    returnContainer( 
        child: Column( 
            children:<Widget>[                   Image.network(value["imageUrl"]),  SizedBox(height:12), 
 Text(value["title"],
 textAlign:TextAlign.center,
 style:TextStyle(fontSize:20)), 
  ], 
  ), 
        decoration:BoxDecoration( 
            border:Border.all(          color:Color.fromRGBO(230,230,230,0.9), 
  width:1.0 ) ),
);
});  
return tempList.toList();
}
@override Widgetbuild(BuildContextcontext){ 
    returnGridView.count( padding:EdgeInsets.all(20), crossAxisCount:2, crossAxisSpacing:20, mainAxisSpacing:20, //childAspectRatio:0.7, children:this._getListData(), ); }

GridView.builder

class LayoutContent extends StatelessWidget{
Widget_getListData(context,index){ 
    returnContainer( 
        child: Column( 
            children:<Widget>[ Image.network(listData[index]["imageUrl"]), SizedBox(height:12), 
Text(
    listData[index]["title"],
    textAlign: TextAlign.center,
    style:TextStyle(fontSize: 20)), 
 ], 
        ), 
        decoration:BoxDecoration( 
            border:Border.all( color:Color.fromRGBO(230,230,230,0.9), 
  width:1.0 ) ),
);
}
    @override 
    Widgetbuild(BuildContextcontext){ returnGridView.builder( 
        itemCount:listData.length, gridDelegate:SliverGridDelegateWithFixedCrossAxisCount( 
            //横轴元素个数 
            crossAxisCount:2, 
            //纵轴间距 
            mainAxisSpacing:20.0, 
            //横轴间距 
            crossAxisSpacing:10.0, 
            //子组件宽高长度比例 
            childAspectRatio:1.0 ), itemBuilder:this._getListData, 
    ); 
}

Padding 边距

在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属 性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

Row 水平布局

Column 垂直布局

Expanded 弹性布局

Stack 层叠组件

Stack 表示堆的意思，我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实 现页面的定位布局

Stack Align

Stack 组件中结合 Align 组件可以控制每个子元素的显示位置

Stack Positioned

Stack 组件中结合 Positioned 组件也可以控制每个子元素的显示位置

AspectRatio 宽高比

? AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
? AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽 度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。
? 如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先 适应布局限制条件，而忽略所设置的比率。

Card 卡片

Wrap 流布局

? Wrap 可以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Row 表 现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空 间不足时，则向 crossAxis 上去扩展显示。

flutter学习----布局

原文：https://www.cnblogs.com/bananafish/p/12255034.html