getItem
为了方便看的更加清晰,还是每篇都贴一下 getItem 的代码,大多都相同,可能变化较大的 Widget 为了效果略微有些不同
/// 获取子项目(这类使用了选择参数)
Widget getItem(String index,
{double? width = 60, double? height = 60, Color color = Colors.orange}) {
return Container(
// 宽高设置 60
width: width,
height: height,
// 设置背景色
color: color,
// 设置间隙
margin: EdgeInsets.all(2),
// 设置子项居中
alignment: Alignment.center,
// 设置子项
child: Text(‘$index’),
);
}
Positioned(定位组件)
上面展示的一种方式中,我们用到了 left、top、right、bottom
4 个定位属性,我们看看源码,其实还有 width、height
属性
而且这里断言设置了left、right、width
或 top、bottom、height
三个属性必须有 1 个为空,接下来我们会聊到为什么。
单属性
BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
left: 10,
child: getItem(‘left 10’),
),
Positioned(
right: 10,
child: getItem(‘right 10’),
),
Positioned(
width: 80,
child: getItem(‘width 80’),
),
Positioned(
top: 10,
child: getItem(‘top 10’),
),
Positioned(
bottom: 10,
child: getItem(‘bottom 10’),
),
Positioned(
height: 80,
child: getItem(‘height 80’),
),
],
),
)
left、right、width | top、bottom、height |
---|---|
组合属性
- topLeft、topRight、bottomLeft、bottomRight
BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
top: 10,
left: 10,
child: getItem(‘topLeft’),
),
Positioned(
top: 10,
right: 10,
child: getItem(‘topRight’),
),
Positioned(
bottom: 10,
left: 10,
child: getItem(‘bottomLeft’),
),
Positioned(
bottom: 10,
right: 10,
child: getItem(‘bottomRight’),
),
],
),
)
- 如果我们将
left
和right
一起使用呢?
BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
left: 10,
right: 10,
child: getItem(‘leftRight’),
),
Positioned(
top: 10,
bottom: 10,
child: getItem(‘topBottom’),
),
],
),
)
leftRight | topBottom |
---|---|
- 如果我们将
left
或right
与width
组合呢?
BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
left: 10,
width: 100,
child: getItem(‘leftWidth 100’),
),
Positioned(
right: 10,
width: 100,
child: getItem(‘RightWidth 100’),
),
Positioned(
top: 10,
height: 100,
child: getItem(‘topHeight 100’),
),
Positioned(
bottom: 10,
height: 100,
child: getItem(‘bottomHeight 100’),
),
],
),
)
| (left | right) & width | (top | bottom) & height | | :—: | :—: | | | |
- 如果同纬度 3 个属性组合呢?
BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Positioned(
left: 10,
right: 10,
width: 100,
child: getItem(‘leftRightWidth 100’),
)
],
),
)
那肯定是报错啦,刚才看源码的时候已经看到断言说不能这样写啦,因为
left和right 可以确定一个宽度,再设置一个宽度就冲突了
- 如果不同维度 3 个属性组合呢?
// bottomLeftWidth 100
Positioned(
left: 10,
bottom: 10,
width: 100,
child: getItem(‘bottomLeftWidth 100’),
),
// rightTopBottom
Positioned(
right: 10,
top: 10,
bottom: 10,
child: getItem(‘rightTopBottom’),
)
bottomLeftWidth 100 | rightTopBottom |
---|---|
只要是不同维度的随便你怎么组合?
小总结
到这里我们基本对 Positioned
基本的使用就全部聊完了,Positioned
可以对当个子项目进行设置定位和宽高,达到更加精准的参数调配。
Align(对齐)
其实实现我们开头的效果还有更加简单一点的方式,就是使用 Align
进行子项的设置
BgContainer(
child: Stack(
alignment: Alignment.center,
// 设置填充方式展接受父类约束最大值
fit: StackFit.expand,
children: [
Align(
child: getItem(‘5’),
//对齐到右下角
alignment: Alignment.bottomRight,
),
Align(
child: getItem(‘4’),
//对齐到左下角
alignment: Alignment.bottomLeft,
最后
其实Android开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
下图是我进阶学习所积累的历年腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题,博主还把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节
整理不易,望各位看官老爷点个关注转发,谢谢!祝大家都能得到自己心仪工作。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
、阿里、美团、字节跳动等公司2019-2021年的高频面试题**,博主还把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节
[外链图片转存中…(img-GDRaqHh7-1714958900312)]
整理不易,望各位看官老爷点个关注转发,谢谢!祝大家都能得到自己心仪工作。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!