如何让这个UI处于Flutter状态?

kmynzznz  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(166)

我一直在尝试在排行榜页面中生成一种平台,这个想法是排行榜上的第一名将有一个顶部有皇冠的圆形头像,其他两个应该在第一个下面一点。一个在左边,另一个在右边,都有一个略小的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)),
        ],
      ),
    );
  }
}
7hiiyaii

7hiiyaii1#

行需要crossAxisAlignment:

Row(
          crossAxisAlignment: CrossAxisAlignment.end, //add this line
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            CircleAvatar(radius: 50,),
            CircleAvatar(radius: 75,),
            CircleAvatar(radius: 50,),
          ],
        ),

wn9m85ua

wn9m85ua2#

我认为这解决了你的问题从 dart 垫截图是附

Container(
    padding:EdgeInsets.only(top:15,bottom:5),
    color:Colors.redAccent,
    child:Row(
      crossAxisAlignment: CrossAxisAlignment.end, //add this line
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        CircleAvatar(radius: 40,),
        SizedBox(width:30),
        Padding(
          padding:EdgeInsets.only(bottom:10),
        child: CircleAvatar(radius: 75,),
        ),
         SizedBox(width:30),
        CircleAvatar(radius: 40,),
      ],
    )
    )

相关问题