dart 抖动容器宽度未调整到屏幕

tag5nh1u  于 2023-05-26  发布在  其他
关注(0)|答案(2)|浏览(160)

我有麻烦,使我的容器适合Flutter宽度。我尽力了
width: MediaQuery.of(context).size.width,
但还是无济于事你可以看到它被过度延伸了,因为我有一个圆形的边界,但在右边,它在后面重叠。参考下面的图片:
水平:x1c 0d1x垂直:

容器代码:

Container(
                        padding: const EdgeInsets.symmetric(
                          vertical: 6,
                          horizontal: 12.0,
                        ),
                        height:
                            150, 
                        width: MediaQuery.of(context).size.width,
                        decoration: const BoxDecoration(
                          color: white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(
                              16.0,
                            ),
                          ),
                        ),
                        child: Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                "Sejarah",
                                style: GoogleFonts.montserrat(
                                  color: black,
                                  fontSize: 16,
                                  letterSpacing: 1,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),

感谢任何帮助我可以得到,谢谢!

zazmityj

zazmityj1#

您可以使用ClipRRect Widget强制容器Widget具有边界半径。使用以下Widget修改您的Widget:

ClipRRect(
              borderRadius: BorderRadius.all(
                Radius.circular(
                  16.0,
                ),
              ),
              child: Container(
                padding: const EdgeInsets.symmetric(
                  vertical: 6,
                  horizontal: 12.0,
                ),
                height: 150,
                width: MediaQuery.of(context).size.width,
                decoration: const BoxDecoration(
                  color: white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(
                      16.0,
                    ),
                  ),
                ),
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "Sejarah",
                        style: GoogleFonts.montserrat(
                          color: black,
                          fontSize: 16,
                          letterSpacing: 1,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
yhuiod9q

yhuiod9q2#

您可以将容器的宽度更改为double.infinity
更改此行

width: MediaQuery.of(context).size.width,

width: double.infinity,

相关问题