如何进行flutter布局开发？

1、

2、

RenderObjectWidget:它主要提供了一些如何去约束它里面的布局的一些配置。

它有两个比较重要的实现&＃xff0c;一个是SingleChildRenderObjectWidget&＃xff0c;另一个是MultiChildRenderObjectWidget.

SingleChildRenderObjectWidget:单节点的一个组件

Opacity   [əʊˈpæsəti]   &＃xff1a;用来改变透明度的一个组件

ClipOval:将布局裁剪成圆形的一个组件

ClipRRect:裁剪成方形的一个组件

PhysicalModel:将布局显示成不同的形状的一个组件

Align&＃xff1a;&＃xff08;如Center,将布局进行居中&＃xff09;

Padding&＃xff1a;设置布局内边距

SizedBox&＃xff1a;用来约束布局的大小

FractionallySizedBox:可以约束里面的布局垂直方向或者水平方向的伸展&＃xff0c;也就是说它可以把布局垂直方向或者水平方向充满整个屏幕&＃xff0c;它是一个可以约束它里面的组件可以撑多大的一个组件

ClipOval:将布局裁成圆形

ClipRRect:裁成方形    Opacity:设置透明度

PhysicalModel:将布局显示成不同的组件

boderRadius:裁剪布局的四个角&＃xff0c;裁剪为圆角

FractionallySizedBox:可以约束里面的布局垂直方向或者水平方向的伸展&＃xff0c;也就是说它可以把布局垂直方向或者水平方向充满整个屏幕&＃xff0c;它是一个可以约束它里面的组件可以撑多大的一个组件

不添加FractionallySizedBox时&＃xff0c;Text只是按它的内容填满了

使用FractionallySizedBox以后&＃xff1a;

MultiChildRenderObjectWidget:多节点的一个组件

Stack:相当于Android的FrameLayout,它里面的布局都是一个叠一个&＃xff0c;后面的布局会覆盖前面的布局

Flex&＃xff1a;有两个重要的实现&＃xff0c;Column和Row。Column&＃xff1a;y轴。垂直方向上从上到下的一个组件。    Row&＃xff1a;x轴。水平方向&＃xff0c;从左到右的水平方向的一个组件。

Wrap&＃xff1a;和Row组件很像&＃xff0c;它们都是从左到右排列的布局。不同之处在于Wrap可以换行。

Flow&＃xff1a;Flow组件用起来不是很方便&＃xff0c;所以它很少遇到。

Column:纵向排列布局   Row:横向排列布局

Stack:相当于Android的FrameLayout,它里面的布局都是一个叠一个&＃xff0c;后面的布局会覆盖前面的布局

Wrap&＃xff1a;和Row组件很像&＃xff0c;它们都是从左到右排列的布局。不同之处在于Wrap可以换行。

3、

ParentDataWidget:它有两个比较重要的实现&＃xff0c;一个是Positioned&＃xff0c;一个是Flexible

Positioned&＃xff1a;用于固定View的一个位置的一个组件&＃xff0c;通常与Stack进行搭配使用

Flexible:它有一个非常重要的实现Expanded&＃xff0c;就是在父容器中能够展开多大大小的一个组件

Positioned&＃xff1a;用于固定View的一个位置的一个组件&＃xff0c;通常与Stack进行搭配使用

第二张图片位于第一张图片的左下方

Flexible:它有一个非常重要的实现Expanded&＃xff0c;就是在父容器中能够展开多大大小的一个组件

不使用Expanded之前&＃xff0c;只能按内容填充高度

因为Column是纵向的&＃xff0c;所以就会在y轴填充满屏幕

4、

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:flutter_color_plugin/flutter_color_plugin.dart&＃39;;void main() &＃61;> runApp(FlutterLayoutPage());//如何进行Flutter布局开发&＃xff1f;
class FlutterLayoutPage extends StatefulWidget{&＃64;overrideState createState() &＃61;> _FlutterLayoutGroupPage();
}class _FlutterLayoutGroupPage extends State{int _currentIndex&＃61;0;Future _handleRefresh()async{await Future.delayed(Duration(milliseconds: 200));return null;}_item(String title,Color color){return Container(alignment: Alignment.center,decoration: BoxDecoration(color: color),child: Text(title,style: TextStyle(fontSize: 22,color:Colors.white)),);}_chip(String label){return Chip(label: Text(label),avatar: CircleAvatar(backgroundColor: Colors.blue.shade900,child: Text(label.substring(0,1),style: TextStyle(fontSize: 10),),));}&＃64;overrideWidget build(BuildContext context) {TextStyle textStyle&＃61;TextStyle(fontSize: 20);return MaterialApp(title: &＃39;如何进行Flutter布局开发&＃xff1f;&＃39;,theme: ThemeData(primarySwatch: Colors.yellow,),home: Scaffold(appBar: AppBar(title: Text(&＃39;如何进行Flutter布局开发&＃xff1f;&＃39;)),bottomNavigationBar: BottomNavigationBar(//默认选中第0个currentIndex: _currentIndex,onTap: (index){setState(() {//当点击后回调该方法&＃xff0c;改变点击的index_currentIndex&＃61;index;});},items:[BottomNavigationBarItem(icon: Icon(Icons.home,color: Colors.grey),activeIcon: Icon(Icons.home,color: Colors.blue),title:Text(&＃39;首页&＃39;)),BottomNavigationBarItem(icon: Icon(Icons.list,color: Colors.grey),activeIcon: Icon(Icons.list,color: Colors.blue),title:Text(&＃39;列表&＃39;))]),floatingActionButton: FloatingActionButton(onPressed: null,child: Text(&＃39;点我&＃39;)),body: _currentIndex&＃61;&＃61;0?RefreshIndicator(child:ListView(children: [Container(decoration: BoxDecoration(color: Colors.blue),alignment: Alignment.center,child: Column(children: [Row(children: [ClipOval(child: SizedBox(width: 100,height: 100,child: Image.network(&＃39;http://www.devio.org/img/avatar.png&＃39;),)),Padding(padding: EdgeInsets.all(10),child: ClipRRect(borderRadius:BorderRadius.all(Radius.circular(10)),//圆角child: Opacity(opacity: 0.6,child: Image.network(&＃39;http://www.devio.org/img/avatar.png&＃39;,width: 100,height: 100,)),),),Text("横向 Row"),],),//网上加载图片Image.network(&＃39;http://www.devio.org/img/avatar.png&＃39;,width: 100,height: 100,),TextField(//输入文本的样式decoration: InputDecoration(contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),hintText: &＃39;请输入&＃39;,hintStyle: TextStyle(fontSize: 15)),),Container(height: 100,margin: EdgeInsets.all(10),
// decoration: BoxDecoration(color: Colors.lightBlueAccent),child:PhysicalModel(color: Colors.transparent,borderRadius: BorderRadius.circular(6),clipBehavior: Clip.antiAlias,//抗锯齿child:PageView(children: [_item("Page1", Colors.deepPurple),_item("Page2", Colors.green),_item("Page3", Colors.red),],),)),Column(children: [FractionallySizedBox(widthFactor: 1,child: Container(decoration: BoxDecoration(color: Colors.greenAccent),child: Text(&＃39;宽度撑满&＃39;),)),],),],),),Stack(children: [Image.network(&＃39;http://www.devio.org/img/avatar.png&＃39;,width: 100,height: 100,),Positioned(left: 0,bottom: 0,child: Image.network(&＃39;http://www.devio.org/img/avatar.png&＃39;,width: 36,height: 36,),)],),Wrap(//创建一个wrap布局&＃xff0c;从左向右进行排列&＃xff0c;会自动换行spacing: 8,//水平间距runSpacing: 6,//垂直间距children: [_chip("Flutter"),_chip("进阶"),_chip("实战"),_chip("携程"),_chip("App"),],)]),onRefresh: _handleRefresh):Column(children: [Text("列表"),Expanded(child: Container(decoration: BoxDecoration(color: Colors.red),child: Text(&＃39;拉伸填满高度&＃39;),))],)),);}}//StateLessWidget与基础组件
class LessGroupPage extends StatelessWidget {// This widget is the root of your application.&＃64;overrideWidget build(BuildContext context) {TextStyle textStyle&＃61;TextStyle(fontSize: 20);return MaterialApp(title: &＃39;StatelessWidget与基础组件&＃39;,theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text(&＃39;StatelessWidget与基础组件&＃39;)),body: Container(decoration: BoxDecoration(color: Colors.blue),alignment: Alignment.center,child: Column(children: [Text(&＃39;I am an Text&＃39;,style: textStyle),Icon(Icons.android,size: 50,color: Colors.red),CloseButton(),BackButton(),Chip(//材料设计中一个非常有趣的小部件avatar: Icon(Icons.people),label: Text(&＃39;StatelessWidget与基础组件&＃39;),),Divider(height: 10,//容器高度&＃xff0c;不是线的高度indent: 10,//左侧间距color: Colors.orange),Card(color: Colors.red,elevation: 5,//阴影margin: EdgeInsets.all(10),child: Container(padding: EdgeInsets.all(10),child: Text(&＃39;I am Card&＃39;,style: textStyle,),),),AlertDialog(title: Text(&＃39;盘它&＃39;),content: Text(&＃39;你这个糟老头子坏得很&＃39;),)],),),),);}
}