1、
2、
RenderObjectWidget:它主要提供了一些如何去约束它里面的布局的一些配置。
它有两个比较重要的实现，一个是SingleChildRenderObjectWidget，另一个是MultiChildRenderObjectWidget.
SingleChildRenderObjectWidget:单节点的一个组件
Opacity [əʊˈpæsəti] ：用来改变透明度的一个组件
ClipOval:将布局裁剪成圆形的一个组件
ClipRRect:裁剪成方形的一个组件
PhysicalModel:将布局显示成不同的形状的一个组件
Align：（如Center,将布局进行居中）
Padding：设置布局内边距
SizedBox：用来约束布局的大小
FractionallySizedBox:可以约束里面的布局垂直方向或者水平方向的伸展，也就是说它可以把布局垂直方向或者水平方向充满整个屏幕，它是一个可以约束它里面的组件可以撑多大的一个组件
ClipOval:将布局裁成圆形
ClipRRect:裁成方形 Opacity:设置透明度
PhysicalModel:将布局显示成不同的组件
boderRadius:裁剪布局的四个角，裁剪为圆角
FractionallySizedBox:可以约束里面的布局垂直方向或者水平方向的伸展，也就是说它可以把布局垂直方向或者水平方向充满整个屏幕，它是一个可以约束它里面的组件可以撑多大的一个组件
不添加FractionallySizedBox时，Text只是按它的内容填满了
使用FractionallySizedBox以后：
MultiChildRenderObjectWidget:多节点的一个组件
Stack:相当于Android的FrameLayout,它里面的布局都是一个叠一个，后面的布局会覆盖前面的布局
Flex：有两个重要的实现，Column和Row。Column：y轴。垂直方向上从上到下的一个组件。 Row：x轴。水平方向，从左到右的水平方向的一个组件。
Wrap：和Row组件很像，它们都是从左到右排列的布局。不同之处在于Wrap可以换行。
Flow：Flow组件用起来不是很方便，所以它很少遇到。
Column:纵向排列布局 Row:横向排列布局
Stack:相当于Android的FrameLayout,它里面的布局都是一个叠一个，后面的布局会覆盖前面的布局
Wrap：和Row组件很像，它们都是从左到右排列的布局。不同之处在于Wrap可以换行。
3、
ParentDataWidget:它有两个比较重要的实现，一个是Positioned，一个是Flexible
Positioned：用于固定View的一个位置的一个组件，通常与Stack进行搭配使用
Flexible:它有一个非常重要的实现Expanded，就是在父容器中能够展开多大大小的一个组件
Positioned：用于固定View的一个位置的一个组件，通常与Stack进行搭配使用
第二张图片位于第一张图片的左下方
Flexible:它有一个非常重要的实现Expanded，就是在父容器中能够展开多大大小的一个组件
不使用Expanded之前，只能按内容填充高度
因为Column是纵向的，所以就会在y轴填充满屏幕
4、
import 'package:flutter/material.dart'; import 'package:flutter_color_plugin/flutter_color_plugin.dart'; void main() => runApp(FlutterLayoutPage()); //如何进行Flutter布局开发？ class FlutterLayoutPage extends StatefulWidget{ @override State<StatefulWidget> createState() => _FlutterLayoutGroupPage(); } class _FlutterLayoutGroupPage extends State<FlutterLayoutPage>{ int _currentIndex=0; Future<Null> _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), ), ) ); } @override Widget build(BuildContext context) { TextStyle textStyle=TextStyle(fontSize: 20); return MaterialApp( title: '如何进行Flutter布局开发？', theme: ThemeData( primarySwatch: Colors.yellow, ), home: Scaffold( appBar: AppBar(title: Text('如何进行Flutter布局开发？')), bottomNavigationBar: BottomNavigationBar( //默认选中第0个 currentIndex: _currentIndex, onTap: (index){ setState(() { //当点击后回调该方法，改变点击的index _currentIndex=index; }); }, items:[ BottomNavigationBarItem( icon: Icon(Icons.home,color: Colors.grey), activeIcon: Icon(Icons.home,color: Colors.blue), title:Text('首页') ), BottomNavigationBarItem( icon: Icon(Icons.list,color: Colors.grey), activeIcon: Icon(Icons.list,color: Colors.blue), title:Text('列表') ) ]), floatingActionButton: FloatingActionButton( onPressed: null, child: Text('点我') ), body: _currentIndex==0? RefreshIndicator( child: ListView( children: <Widget>[ Container( decoration: BoxDecoration(color: Colors.blue), alignment: Alignment.center, child: Column( children: <Widget>[ Row( children: <Widget>[ ClipOval( child: SizedBox( width: 100, height: 100, child: Image.network('http://www.devio.org/img/avatar.png' ), ) ), Padding( padding: EdgeInsets.all(10), child: ClipRRect( borderRadius:BorderRadius.all(Radius.circular(10)),//圆角 child: Opacity(opacity: 0.6, child: Image.network('http://www.devio.org/img/avatar.png', width: 100, height: 100, ) ), ), ), Text("横向 Row"), ], ), //网上加载图片 Image.network('http://www.devio.org/img/avatar.png', width: 100, height: 100,), TextField( //输入文本的样式 decoration: InputDecoration( contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0), hintText: '请输入', 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: <Widget>[ _item("Page1", Colors.deepPurple), _item("Page2", Colors.green), _item("Page3", Colors.red), ], ), ) ), Column( children: <Widget>[ FractionallySizedBox( widthFactor: 1, child: Container( decoration: BoxDecoration(color: Colors.greenAccent), child: Text('宽度撑满'), ) ), ], ), ], ), ), Stack( children: <Widget>[ Image.network('http://www.devio.org/img/avatar.png', width: 100, height: 100, ), Positioned( left: 0, bottom: 0, child: Image.network('http://www.devio.org/img/avatar.png', width: 36, height: 36, ), ) ], ), Wrap( //创建一个wrap布局，从左向右进行排列，会自动换行 spacing: 8,//水平间距 runSpacing: 6,//垂直间距 children: <Widget>[ _chip("Flutter"), _chip("进阶"), _chip("实战"), _chip("携程"), _chip("App"), ], ) ] ), onRefresh: _handleRefresh) :Column( children: <Widget>[ Text("列表"), Expanded( child: Container( decoration: BoxDecoration( color: Colors.red ), child: Text('拉伸填满高度'), ) ) ], ) ), ); } } //StateLessWidget与基础组件 class LessGroupPage extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { TextStyle textStyle=TextStyle(fontSize: 20); return MaterialApp( title: 'StatelessWidget与基础组件', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar(title: Text('StatelessWidget与基础组件')), body: Container( decoration: BoxDecoration(color: Colors.blue), alignment: Alignment.center, child: Column( children: <Widget>[ Text('I am an Text',style: textStyle), Icon(Icons.android,size: 50,color: Colors.red), CloseButton(), BackButton(), Chip( //材料设计中一个非常有趣的小部件 avatar: Icon(Icons.people), label: Text('StatelessWidget与基础组件'), ), Divider( height: 10,//容器高度，不是线的高度 indent: 10,//左侧间距 color: Colors.orange ), Card( color: Colors.red, elevation: 5,//阴影 margin: EdgeInsets.all(10), child: Container( padding: EdgeInsets.all(10), child: Text('I am Card',style: textStyle,), ), ), AlertDialog( title: Text('盘它'), content: Text('你这个糟老头子坏得很'), ) ], ), ), ), ); } }
