单一子元素组件有Container、Padding、Align、Center、FittedBox、AspectRatio、SingleChildScrollView、FractionallySizedBox、ConstrainedBox和Baseline等。
- Container
使用最多的单一元素组件就是container
Container(
alignment: Alignment.center,
constraints: const BoxConstraints.expand(width: 100, height: 80),
decoration: BoxDecoration(
border: Border.all(color: Colors.green, style: BorderStyle.solid, width: 2.0),
image: const DecorationImage(image: AssetImage('images/home_icon.png')),
borderRadius: const BorderRadius.all(Radius.circular(30)),
boxShadow: const [
BoxShadow(
color: Colors.redAccent,
offset: Offset(20, 20),
blurRadius: 10,
),
],
),
transform: Matrix4.rotationZ(.3),
margin: const EdgeInsets.all(100.0),
child: const Text('我是傻逼',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 13, fontStyle: FontStyle.italic, color: Colors.grey)),
)
运行效果:
- Padding
Padding 在其他组件中padding是一个属性,我们也可以用Padding包含子组件。
Container(
width: 100,
height: 50,
color: Colors.red,
child: const Padding(
padding: EdgeInsets.all(10.0),
child: Text('啊啊啊啊'),
),
)
- Align
Align可以包含一个child,设置其对齐方式,例如居中、居左、居右等。还有两个属性widthFactor和heightFactor,当Align不设置widthFactor和heightFactor时,Align只会跟随alignment属性调整其位置。当Align设置这两个属性后,Align会随着这两个属性改变自己的尺寸。
Align(
child:Text('我是Align'),
heightFactor: 2.0,
widthFactor:2.0,
alignment:Alignment.center,
)
- Center
Center是一个居中的组件,继承Align。它也有heightFactor和widthFactor属性,实际上Center组件就是把Align组件中的alignment设置为Alignment.center后的组件。
Center(
child:Text('我是Center'),
heightFactor:2.0,
widthFactor:2.0,
)
- FittedBox
FittedBox类似于Android中的ImageView控件,它有fit属性,类似于scaleType。
body: Column(
children:<Widget>[
Container(
width: 300,
height: 100,
color: Colors.red,
child: const FittedBox(
fit: BoxFit.contain,
child: Text('BoxFix.contain', style: TextStyle(fontSize: 16),),
),
),
Container(
width:300,
height: 100,
color: Colors.green,
child: const FittedBox(
fit: BoxFit.cover,
child: Text('BoxFit.cover', style: TextStyle(fontSize: 16),),
),
),
Container(
width: 300,
height: 50,
color: Colors.blue,
child: const FittedBox(
fit: BoxFit.fill,
child: Text('BoxFit.fill', style: TextStyle(fontSize: 16),),
),
),
Container(
width: 300,
height: 100,
color: Colors.yellow,
child: const FittedBox(
fit: BoxFit.scaleDown,
child: Text('BoxFit.scaleDown', style: TextStyle(fontSize: 16),),
),
),
Container(
width: 300,
height: 30,
color: Colors.purple,
child: const FittedBox(
fit: BoxFit.fitHeight,
child: Text('BoxFit.fitHeight', style: TextStyle(fontSize: 16),),
),
),
]
)
运行效果:
- AspectRatio
AspectRatio 宽高比是相对父容器的。宽是父容器的宽,高是根据指定的比例计算出来的。如果父容器 同时给定了宽和高, 则AspectRatio 宽高比不生效。
Container(
width: 200,
color: Colors.blue,
child: AspectRatio(
aspectRatio: 2/1,
child: Container(
color: Colors.yellow,
),
),
),
Container(
width: 200,
height: 200,
color: Colors.blue,
child: AspectRatio(
aspectRatio: 2/1,
child: Container(
color: Colors.purple,
),
),
)
运行结果:
- SingleChildScrollView
SingleChildScrollView是一个滚动布局,相当于Android中的ScrollView。默认滚动方向是垂直的,可以通过scrollDirection属性设置滚动方向。
- FractionallySizedBox
FractionallySizeBox是基于宽高缩放因子来调整布局大小的,和FittedBox一样子组件是有可能超出父组件设置的范围的。
Container(
color: Colors.purple,
width: 100,
height: 100,
child: FractionallySizedBox(
widthFactor: 2.0,
heightFactor: 0.5,
alignment: Alignment.center,
child: Container(
color: Colors.green,
),
),
)
运行结果:
- ConstrainedBox
ConstrainedBox是约束组件,子组件不能超过设置的约定范围。
ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 100,
minHeight: 100,
maxWidth: 100,
maxHeight: 100,
),
child: Container(
color: Colors.green,
width: 100,
height: 200,
),
)
- Baseline
Baseline是一个基线组件。
属性 | 类型 | 说明 |
---|---|---|
baseline | double | 必填参数,从顶部开始计算 |
手机 | TextBaseline | 必填参数,baseline类型,有两种类型alphabetic表示对齐字符底部水平线,ideographic表示对齐表意字符的水平线 |