容器在高度和宽度范围内充满小部件而不会溢出

Question

我有一个棘手的问题要解决。在这种情况下，我有一个可以扩大设备尺寸的高度和宽度的容器。在此小部件内，我还有其他小部件位于可见区域的范围之外。所以现在我得到了在这种情况下底部溢出的错误。我以为我可以在更改状态时将不透明度设置为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'),
                  )],
                ),
              ),
            ),
          ),
        ],
      ),
    ],
  ),
);

这里是发生的问题。

Answer 1

这应该有效（只需用我的代码填充替换您的代码“我溢出”）：

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

希望它有所帮助

Answer 2

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

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

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