当前位置:网站首页>flutter 做底部的三个按键,有叠加,有填充
flutter 做底部的三个按键,有叠加,有填充
2022-07-30 23:13:00 【氤氲息】
//底部三个按键
Widget addBottomSection() {
return Container(
margin: const EdgeInsets.only(bottom: 24, left: 16, right: 16),
child: Row(
children: [
Expanded(
child: Container(
alignment: Alignment.center,//这个很重要
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.topRight,
children: [
GestureDetector(
onTap: () {
Future.delayed(const Duration(seconds: 1), () {
if (_isCanDrag) {
getBottleSetting();
}
});
setState(() {
_isDragAnimation = true;
});
dragPlay();
},
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.bottomCenter,
children: [
Container(
height: 102,
width: 102,
decoration: const BoxDecoration(
image: DecorationImage(
image:
AssetImage('assets/images/bg_drift_drag.png'),
fit: BoxFit.fill, // 完全填充
),
),
),
Positioned(
left: 10,
child: Container(
margin: const EdgeInsets.only(bottom: 20),
child: const Image(
image: AssetImage(
'assets/images/icon_drift_net.png'),
width: 100,
fit: BoxFit.fitWidth),
),
),
Container(
padding: const EdgeInsets.only(bottom: 10),
child: Text(
S.current.bottle_grab,
style: const TextStyle(
fontSize: 14,
color: Color(0xFFFFF5F1),
decoration: TextDecoration.none),
)),
],
),
),
Positioned(
right: -5, child: showMessageNumView(remainFishTimes))
],
),
)),
Expanded(
child: Container(
alignment: Alignment.center,
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.topRight,
children: [
GestureDetector(
onTap: () {
showThrowBottleDialog();
},
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.bottomCenter,
children: [
Container(
height: 102,
width: 102,
decoration: const BoxDecoration(
image: DecorationImage(
image:
AssetImage('assets/images/bg_drift_throw.png'),
fit: BoxFit.fill, // 完全填充
),
),
),
Positioned(
left: 20,
child: Container(
margin: const EdgeInsets.only(bottom: 35),
child: const Image(
image:
AssetImage('assets/images/icon_bottle.png'),
width: 64,
fit: BoxFit.fitWidth),
),
),
Container(
padding: const EdgeInsets.only(bottom: 10),
child: Text(
S.current.bottle_throw,
style: const TextStyle(
fontSize: 14,
color: const Color(0xFFFFF5F1),
decoration: TextDecoration.none),
)),
],
),
),
Positioned(
right: -5, child: showMessageNumView(remainThrowTimes))
],
),
)),
Expanded(
child: Container(
alignment: Alignment.center,
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.topRight,
children: [
GestureDetector(
onTap: () {
MyRouter.pushMy(context, const MyBottleNav())
.then((value) => getMessageNum());
},
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.bottomCenter,
children: [
Container(
height: 102,
width: 102,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/bg_drift_bottles.png'),
fit: BoxFit.fill, // 完全填充
),
),
),
Positioned(
left: 10,
child: Container(
margin: const EdgeInsets.only(bottom: 35),
child: const Image(
image: AssetImage(
'assets/images/icon_drift_bottles.png'),
width: 84,
fit: BoxFit.fitWidth),
),
),
Container(
padding: const EdgeInsets.only(bottom: 10),
child: Text(
S.current.bottle_my,
style: const TextStyle(
fontSize: 14,
color: Color(0xFFFFF5F1),
decoration: TextDecoration.none),
)),
],
),
),
Positioned(right: -5, child: showMessageNumView(MesNum))
],
),
)),
],
),
);
}
边栏推荐
猜你喜欢
2sk2225代换3A/1500V中文资料【PDF数据手册】
Go1.18升级功能 - 泛型 从零开始Go语言
微软商店出现【0x800706D9】解决方法
Reverse linked list - head insertion inversion method
2022中国物流产业大会暨企业家高峰论坛在杭州举办!
软件测试三阶段,你在哪一步?
Flex布局使用
2021GDCPC Guangdong University Student Programming Competition H.History
Apache Doris系列之:安装与部署详细步骤
Introducing the visualization tool Netron
随机推荐
力扣题(3)—— 无重复字符的最长子串
[MySQL] Related operations on databases and tables in MySQL
Excel基础学习笔记
PyTorch模型导出到ONNX文件示例(LeNet-5)
Excel basic study notes
2021GDCPC广东省大学生程序设计竞赛 H.History
第十九周进度(了解物联网基础知识)
"NIO Cup" 2022 Nioke Summer Multi-School Training Camp 4 DHKLN
# Dasctf 7月赋能赛 WP
MySQL连接时出现2003错误
ML之shap:基于FIFA 2018 Statistics(2018年俄罗斯世界杯足球赛)球队比赛之星分类预测数据集利用RF随机森林+计算SHAP值单样本力图/依赖关系贡献图可视化实现可解释性之攻略
win10重建索引
软考学习计划
Week 19 Progress (Understanding IoT Basics)
ZZULIOJ:1119: sequence order
Successfully resolved ModuleNotFoundError: No module named 'Image'
【无标题】
Py's pdpbox: a detailed introduction to pdpbox, installation, and case application
【MySQL】MySQL中对数据库及表的相关操作
HashSet源码解析