Flutter 容器溢出

Question

我正在尝试在具有响应宽度和高度的容器内显示图像。

这是我的代码：

 ...
 child: Column (
    mainAxisSize: MainAxisSize.min,
    children: [
       Row (
          children: [
             Padding (
                padding: EdgeInsets.all(20),
                child: Container(
                   height: MediaQuery.of(context).size.height *.3,
                   width: MediaQuery.of(context).size.width * 1,
                   padding: const EdgeInsets.all(15),
                   decoration: BoxDecoration(
                      image: DecorationImage(
                         image: AssetImage("assets/images/gunung.jpg"),
                         fit: BoxFit.cover,
                ...

这是输出：

有什么解决办法吗？

Answer 1

由于您已将 Container 的 width 设置为

MediaQuery.of(context).size.width * 1

这意味着它将占用设备屏幕的宽度 space。

更不用说，您还设置了 Padding。那就是占用左、上、右和下 20 的间距。

padding: EdgeInsets.all(20)

Padding 使您的 Container 超前，因此溢出。

有很多方法可以解决这个问题。

您可以从为容器初始化的宽度中减去填充。左边20个，右边20个

(MediaQuery.of(context).size.width * 1) - 20 - 20

您可以在容器本身内设置填充。您可能不需要 Padding 小部件单独挂在 Container.

    Padding(                                  // <---- remove
      padding: EdgeInsets.all(20),            // <---- remove
      child: Container(
        height: MediaQuery.of(context).size.height *.3,
        width: MediaQuery.of(context).size.width * 1,
        padding: const EdgeInsets.all(20),    // <---- use this
        ...

Answer 2

只需将此更改为您的代码即可：

//添加Exapanded widget

 child: Column (
        mainAxisSize: MainAxisSize.min,
        children: [
           Row (
              children: [
    //Add Expanded Widget it will solve your issue 
    Expanded(
                 Padding (
                    padding: EdgeInsets.all(20),
                    child: Container(
                       height: MediaQuery.of(context).size.height *.3,
                       width: MediaQuery.of(context).size.width * 1,
                       padding: const EdgeInsets.all(15),
                       decoration: BoxDecoration(
                          image: DecorationImage(
                             image: AssetImage("assets/images/gunung.jpg"),
                             fit: BoxFit.cover,

Flutter 容器溢出

Flutter container overflow

flutter

flutter-layout