我一直在尝试在排行榜页面中生成一种平台,这个想法是排行榜上的第一名将有一个顶部有皇冠的圆形头像,其他两个应该在第一个下面一点。一个在左边,另一个在右边,都有一个略小的CircleAvatar。
我已经连续做了。这就是它的样子
但这就是我想要的。
(在Photoshop中编辑)
我不想硬编码任何数字,如容器的大小或任何类似的东西。我已经尝试了不同的选项,与对齐,间隔,使用堆栈,但到目前为止,我总是发现一些问题,以获得最终的结果。我想知道什么是最好的方法来实现我想要的目标。是否有其他Widget我没有考虑这个任务?
我通过在CustomWidget上使用Transform.scale使#2和#3的位置变小。
平台化身WIDGET代码。
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class PodiumAvatar extends StatelessWidget {
final String profileImage;
final int rank;
const PodiumAvatar(
{required this.profileImage, required this.rank, super.key});
@override
Widget build(BuildContext context) {
return Container(
height: 150,
width: 110,
child: Stack(children: [
const Positioned(
top: 25,
child: CircleAvatar(
backgroundColor: Colors.amber,
radius: 55,
child: CircleAvatar(
foregroundImage: AssetImage(
'assets/images/profile_1.jpg',
),
radius: 50,
),
),
),
Positioned(
left: 42,
bottom: 10,
child: CircleAvatar(
backgroundColor: Colors.amberAccent,
radius: 12,
child: Text(rank.toString()),
)),
if (rank == 1)
Positioned(
left: 38,
top: -3,
child: SvgPicture.asset('assets/images/crown1.svg', height: 32))
]));
}
}
PODIUM WIDGET(这是我想要安排3个项目的位置)
import 'package:flutter/material.dart';
import 'package:trivia_app/widgets/podium_avatar.dart';
class Podium extends StatelessWidget {
final String profileImage;
final int rank1;
const Podium({required this.profileImage, required this.rank1, super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.lightBlue,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end, //add this line
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.scale(
scale: 0.65,
child: PodiumAvatar(profileImage: profileImage, rank: rank1)),
PodiumAvatar(profileImage: profileImage, rank: rank1),
Transform.scale(
scale: 0.65,
child: PodiumAvatar(profileImage: profileImage, rank: rank1)),
],
),
);
}
}
2条答案
按热度按时间7hiiyaii1#
行需要crossAxisAlignment:
wn9m85ua2#
我认为这解决了你的问题从 dart 垫截图是附