flutter 容器的子列抖动中的中心图像

m3eecexj  于 2023-01-14  发布在  Flutter
关注(0)|答案(3)|浏览(141)

我想在列中心对齐图像,并增加图像的大小。
我想要的样子

这是我用代码得到的

下面是我的代码:

class BigRoundedContainer extends StatelessWidget {
  final String image, text;

  const BigRoundedContainer({Key? key, required this.image, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 145.w,
      height: 145.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(Dimensions.radius40),
        color: Colors.white,
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.black.withOpacity(0.5),
            blurRadius: Dimensions.radius10,
            offset: const Offset(0.0, 10),
          )
        ],
      ),
      child: Padding(
        padding: EdgeInsets.only(bottom: Dimensions.height10),
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Expanded(
            child: Image.asset(
              image,
              color: AppColors.fIconsAndTextColor,
            ),
          ),
          SmallText(text: text, size: Dimensions.height20),
        ]),
      ),
    );
  }
}

这就是我使用BigRoundedContainer的方式

Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                 BigRoundedContainer(
                      image: "assets/images/agency.png",
                      text: LanguageStringKeys.instance.agency.tr,
                    ),
                  
                 BigRoundedContainer(
                      image: "assets/images/freelancer.png",
                      text: LanguageStringKeys.instance.freelancer.tr,
                    ),
                  ),
                ],
cig3rfwq

cig3rfwq1#

使用Expanded时,可以跳过Image上的大小参数。

Expanded(
     child: Image.asset(
       image,
       fit: BoxFit.cover,
     ),
   ),
dgsult0t

dgsult0t2#

试试这个:

Expanded(
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Image.asset(
      image,
      color: AppColors.fIconsAndTextColor,
    ),
  ),
),
Padding(
  padding: const EdgeInsets.only(top: 16.0),
  child: SmallText(text: text, size: Dimensions.height20),,
)

你可以用SmallText's padding来获得你想要的空间。

xqnpmsa8

xqnpmsa83#

在父容器中给予填充,然后提供图像宽度、高度和文本之间的边距

相关问题