容器装满了高、宽的小部件，没有溢出

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

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

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

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

Answer 2

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

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

希望有帮助

Answer 3

在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"),
)

< li >查看。不见了

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