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，您可以在列表中使用集合。由于带有溢出文本的填充位于一列内，因此填充是列表的一部分。如果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 搜索“如果收集”。

Answer 3

在android中，我们具有三种可见性状态[ View.GONE ， View.INVISIBLE ， View.VISIBLE ]，但在抖动状态下，我们可以实现像这样的Opacity或Visibility Widget：

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'),
    )
 )

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

3 个答案: