前言
Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一
header-illustration.png
容器类
继续来学习下使用不同的容器
AspectRation
固定宽高比组件,宽度比高度,比如可以用来限定图片的展示比例
A widget that attempts to size the child to a specific aspect ratio.
The widget first tries the largest width permitted by the layout
constraints. The height of the widget is determined by applying the
given aspect ratio to the width, expressed as a ratio of width to height.
这里提到会限定子的宽度按照约束的最大宽度，然后根据比例计算子的高度
Container(
width: 100,
child: AspectRatio(
aspectRatio: 2 / 1,
child: Container(
color: Colors.blue,
)))
ratio.PNG
FractionallySizedBox
相对父组件尺寸的组件，默认的Aligment是center
FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.5,
child: Container(color: Colors.blue)
fraction.PNG
Flexible
权重组件，可以对Row, Column, Flex的子控件进行设置，默认占满父组件
Container(
height: 100,
child: Row(
children: [
Container(child: Container(color: Colors.red,width: 50)),
Flexible(child: Container(color: Colors.green,)),
Flexible(child: Container(color: Colors.blue,))
],
),)
两个Flexible平分了剩余父容器区域
flex1.PNG
Container(
height: 100,
child: Row(
children: [
Container(child: Container(color: Colors.red,width: 50,)),
Flexible(child: Container(color: Colors.green,),flex: 1,),
Flexible(child: Container(color: Colors.blue,),flex: 2,)
],
),)
两个Flexible按照比例分配了剩余父容器区域，使用flex属性
flex2.PNG
Flexible中的 fit
-
tight强制充满剩余空间 -
loose允许以最小的高度(Row下是宽度)布局 可以忽略flex的值
这两个参数如何使用，看看下面的案例
当我们不设置fit 参数时候,默认值是loose
Container(height:100,child: Row(children: [
Flexible(flex:1,child: Container(color: Colors.red)),
Flexible(flex:1,child: Container(width:100,color: Colors.green)),
Flexible(flex:1,child: Container(color: Colors.blue))
]),)
flex4.PNG
当我们设置为tight则会强制充满
Container(height:100,child: Row(children: [
Flexible(flex:1,child: Container(color: Colors.red)),
Flexible(flex:1,fit:FlexFit.tight,child: Container(width:100,color: Colors.green)),
Flexible(flex:1,child: Container(color: Colors.blue))
]),)
flex3.PNG
Spacer
Spacer主要用以撑开剩余空间
Row(children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(width: 100, color: Colors.green)),
Spacer(),
Flexible(flex: 0, child: Container(width: 100, color: Colors.blue))
])
flex5.PNG
Expanded
Expanded是Flexible的子控件，并且设置了fit: FlexFit.tight,所以它相当于Flexible设置为tight的用法
const Expanded({
Key? key,
int flex = 1,
required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
案例实现
计算器布局
Container(color:Colors.black12,child: Column(children: [
Container(
height: 200,
color: Colors.white,
alignment: Alignment.centerRight,
child: Padding(padding: EdgeInsets.all(20),child: Text('12345678',style: TextStyle(fontSize: 50)))),
Expanded(child: Container(child: Row(
children: [
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('MC',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('M+',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('M-',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('MR',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
],
),)),
Expanded(child: Container(child: Row(
children: [
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('C',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('-',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('÷',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('<-',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
],
),)),
Expanded(child: Container(child: Row(
children: [
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('7',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('8',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('9',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('-',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
],
),)),
Expanded(child: Container(child: Row(
children: [
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('4',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('5',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('6',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('+',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
],
),)),
Expanded(flex:2,child: Container(child: Row(
children: [
Expanded(child: Column(
children: [
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('1',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('%',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
],
)),
Expanded(child: Column(
children: [
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('2',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('0',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
],
)),
Expanded(child: Column(
children: [
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('3',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('.',style: TextStyle(fontSize: 30),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20))),)),
],
)),
Expanded(child: Container(margin:EdgeInsets.all(5),child: DecoratedBox(child: Container(child: Text('=',style: TextStyle(fontSize: 30,color: Colors.white),),alignment: Alignment.center,),decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(20))),)),
],
),)),
]),)
flex6.PNG
欢迎关注Mike的简书
Android 知识整理
网友评论