颤振拉伸列至全屏高度

Question

所有三个元素都位于屏幕顶部，并且拉伸以填充宽度，但是我希望它们可以拉伸以垂直地从上到下填充屏幕。

我尝试在所有内容周围添加Row，但是会引发错误RenderFlex children have non-zero flex but incoming width constraints are unbounded？因此，我尝试将Row包装在Expanded小部件中，并引发错误“必须在Flex小部件内放置扩展小部件”。

return Scaffold(
  backgroundColor: Color(0xFF222222),
  body: Column(
  children: <Widget>[
    SizedBox(height: 20),
    Row(
      // crossAxisAlignment: CrossAxisAlignment.stretch,//throws error
      children: <Widget>[
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                color: Colors.red,
                child: Text('Left', textAlign: TextAlign.center),
              ),
            ],
          ),
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                color: Colors.red,
                child: Text('Right', textAlign: TextAlign.center),
              ),
            ],
          ),
        ),
      ],
    ),
    Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Text('Bottom', textAlign: TextAlign.center),
        ),
      ],
    ),
  ],
),
);

Answer 1

这是均匀分布容器（水平和垂直）的一种方式：

return Scaffold(
  backgroundColor: Color(0xFF222222),
  body: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.red,
                child: Text('Left', textAlign: TextAlign.center),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.green,
                child: Text('Right', textAlign: TextAlign.center),
              ),
            ),
          ],
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.blue,
          child: Text('Bottom', textAlign: TextAlign.center),
        ),
      ),
    ],
  ),
);

结果：

Answer 2

这更像您所追求的吗？

每个容器包含一列，可让您添加多个小部件。

return Scaffold(
      backgroundColor: Color(0xFF222222),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Expanded(
                    child: Container(
                      color: Colors.red,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Text('Left', textAlign: TextAlign.center),
                          Text('Left', textAlign: TextAlign.center),
                          Text('Left', textAlign: TextAlign.center),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.green,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Text('Right', textAlign: TextAlign.center),
                          Text('Right', textAlign: TextAlign.center),
                          Text('Right', textAlign: TextAlign.center),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('Bottom', textAlign: TextAlign.center),
                    Text('Bottom', textAlign: TextAlign.center),
                    Text('Bottom', textAlign: TextAlign.center),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

Screenshot of code running

Answer 3

要使列占据显示的整个宽度并平均分配高度，我执行了以下操作：

return MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.black,
    body: SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: SizedBox(
              width: double.infinity,
              child: FlatButton(
                onPressed: () {
                  playSound(1);
                },
                color: Colors.blue,
              ),
            ),
          ),

Expanded 小部件将共享高度，而 SizedBox 小部件将占用整个宽度，并且宽度设置为double.infinity。

Answer 4

最终编辑版本4：

这应该适用于列

fun showAlternativeForAnimation(view: LinearLayout) {
        val drawable = view.background as GradientDrawable
        val theme = PasswordRecoveryTheme(ApplicationSession.instance?.themeId)
        drawable.setStroke(1, theme.getAccentColor(ApplicationFactory.context!!))

    }