flutter 使容器停留在容器内的底部

hivapdat  于 2022-11-30  发布在  Flutter
关注(0)|答案(2)|浏览(361)

所以我试图使名称保持在下面,即使在不同大小的屏幕。我不能使类别名称保持在下面。

这是目前为止的源代码

class CategoryItem extends StatelessWidget {
  final Category category;
  const CategoryItem({super.key, required this.category});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.only(top: 20),
      decoration: BoxDecoration(
        color: category.backColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), 
          topRight: Radius.circular(10)
        )
      ),
      child: Stack(
        children: [
          Image.asset(
            category.image,
            height: 80,
            width: 80,
            alignment: Alignment.topCenter,
          ),
          Container(
            padding: EdgeInsets.all(10),
            width: double.infinity,
            margin: EdgeInsets.only(top: 60),
            color: Colors.white,
            child: Text(category.title)
            )
        ]
      ),
    );
  }
}
unguejic

unguejic1#

您可以尝试将Container Package 在Align Widget中,并将对齐方式设置为bottomCenter

Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                    padding: EdgeInsets.all(10),
                    width: double.infinity,
                    margin: EdgeInsets.only(top: 60),
                    color: Colors.white,
                    child: Text(category.title)),
              )
ff29svar

ff29svar2#

只是不要使用您的Stack小部件并将其更改为Column

class CategoryItem extends StatelessWidget {
  final Category category;
  const CategoryItem({super.key, required this.category});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.only(top: 20),
      decoration: BoxDecoration(
        color: category.backColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), 
          topRight: Radius.circular(10)
        )
      ),
      child: Column(
        children: [
          Image.asset(
            category.image,
            height: 80,
            width: 80,
            alignment: Alignment.topCenter,
          ),
          Container(
            padding: EdgeInsets.all(10),
            width: double.infinity,
            margin: EdgeInsets.only(top: 60),
            color: Colors.white,
            child: Text(category.title)
            )
        ]
      ),
    );
  }
}

现在,您小部件设计应该可以按照您的要求工作了

相关问题