容器装满了超出高度和宽度的小部件而不会溢出

Posted 2023-02-23

【中文标题】容器装满了超出高度和宽度的小部件而不会溢出

【英文标题】：Container filled with widgets beond hight and width without getting overflowed

【发布时间】：2020-09-19 02:14:31

【问题描述】：

我有一个棘手的问题要解决。 在这种情况下，我有一个容器，可以扩展设备尺寸的高度和宽度。 在这个小部件内，我有其他小部件放置在可见区域的范围之外。 所以现在我得到了在这种情况下底部区域溢出的错误。我以为我可以将不透明度设置为 0，然后在更改状态时将其翻转为 1，但事实并非如此，因为 Flutter 仍然知道那里有东西。在良好的旧 android 中，您可以将可见性设置为“消失”以使其不占用空间。

这是我的布局代码：

Container(
  color: primaryColor,
  child: Stack(
    fit: StackFit.loose,
    children: [
      SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Align(
            alignment: Alignment.topCenter,
            child: Column(
              children: [
                Icon(
                  Icons.swap_calls,
                  size: 100,
                  color: Colors.white,
                ),
                Text(
                  'TCM Sensory',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontWeight: FontWeight.w600),
                ),
                Text(
                  'Made to be perfect',
                  style: TextStyle(color: Colors.white),
                ),
              ],
            ),
          ),
        ),
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: AnimatedContainer(
              duration: Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              height: _height,
              width: _width,
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: secondaryColor,
                borderRadius: BorderRadius.circular(_radius),
              ),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: () 
                        setState(() 
                          if (!_toggle) 
                            _radius = 0;
                            _width = MediaQuery.of(context).size.width;
                            _height = MediaQuery.of(context).size.height;
                            _title = "Press to Stop";
                            _color = primaryColor;
                            _toggle = true;
                           else 
                            _radius = 10;
                            _width = 150;
                            _height = 50;
                            _title = "Press to Start";
                            _color = secondaryColor;
                            _toggle = false;
                          
                        );
                      ,
                      child: Container(
                        width: 140,
                        height: 30,
                        decoration: BoxDecoration(
                          color: _color,
                          borderRadius: BorderRadius.circular(8)
                        ),
                        child: Center(
                          child: Text(
                            _title,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.w600),
                          ),
                        ),
                      ),
                    ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text('I am overflowed'),
                  )],
                ),
              ),
            ),
          ),
        ],
      ),
    ],
  ),
);

这是发生的问题。

【问题讨论】：

您是否尝试使用 Visibility Widget 包装小部件？

@Nickan 这真的很棒。您能否将其发布为答案，以便我将其标记为答案？

很高兴它对您有所帮助，我发布了我的答案

【参考方案1】：

在android中我们有三种可见性状态[ View.GONE, View.INVISIBLE, View.VISIBLE ] 但在flutter中我们可以实现像这样的不透明度或可见性小部件：

View.INVISIBLE

Opacity(
  opacity: 0.0,
  child: const Text("you can't see me but I still take up space"),
)

View.Gone

Visibility(
  visible: false,
  child: const Text("you can't see me and I don’t take any space"),
)

View.VISIBLE

Visibility(
  visible: true,
  child: const Text("you can see me"),
)

或

Opacity(
  opacity: 1.0,
  child: const Text("you can see me"),
)

---

在你的情况下，你应该这样做：

Visibility(
  visible: !_toggle,
  child : Padding(
       padding: const EdgeInsets.all(16.0),
       child: Text('I am overflowed'),
    )
 )

【参考方案2】：

这应该可以工作（只需用我的代码替换你的代码“我溢出”）：

_width == MediaQuery.of(context).size.width ? Padding(
   padding: const EdgeInsets.all(16.0),
   child: Text('I am overflowed'),
) : Container()

希望对你有帮助

【参考方案3】：

在 Dart 2.3 中，您可以在列表中使用集合。由于您的溢出文本填充在列中，因此填充是列表的一部分。如果 if 中的表达式为真，则包含 Padding，否则不包含。

if(!_toogle)
  Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text('I am overflowed'),
  )

这里是文档的链接：https://dart.dev/guides/language/language-tour#lists 搜索“collection if”。