Flutter web - 将高度设置为 100% 而不是 100vh

Question

在 HTML 中创建一个分为 2 列的页面，跨越 100% 的屏幕高度很容易

<div id="row">

<div id="column1" style="width:75%; height:100%"></div>
<div id="column2" style="width:25%; height:100%"></div>

</div>

使用 Flutter 这似乎比它应该的要复杂，我尝试通过两种方式实现上述目标：（页面的轮廓是 CustomScrollView -> SliverToBoxAdapter -> Row -> Columns）

• 使用MediaQuery 将列的高度设置为deviceSize.height。这失败了，因为随着左列比右列大，右列没有扩大到匹配的大小。

• 使用Expanded 或Flexible（紧或松）尝试扩大高度。这不起作用。

我的问题是如何在 Flutter web 中实现 100% 高度而不是 100vh 高度？

编辑：

这说明了问题，右列的大小没有扩大到与左列匹配。

CustomScrollView(
    slivers: <Widget>[
      SliverFillRemaining(
        child: Container(
          color: Colors.purple,
          child: SingleChildScrollView(
            child: Row(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Column(
                    children: <Widget>[
                      Text("test"),
                      SizedBox(height: 300),
                      Text("test"),
                      SizedBox(height: 300),
                      Text("test"),
                      SizedBox(height: 300),
                      Text("test"),
                      SizedBox(height: 300),
                    ],
                  ),
                ),
                Container(
                  color: Colors.yellow,
                  child: Column(
                    children: <Widget>[Text("test")],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  );

Answer 1

不确定这是否是您想要的。但根据您的陈述，我认为您正在寻找两列布局，如here 和如下图所示。

以下是相同的代码。您可以在 Expanded 小部件中调整 flex 值以获得所需的屏幕宽度比。但是如果你想像使用拖动手柄一样调整每列的宽度，那么仅此一项就足够了。

import 'package:flutter/material.dart';

class FullHeightDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Row(
      children: <Widget>[
        Expanded(
          flex: 4,
          child: Container(
            color: Colors.red,
            child: Center(
              child: Text(
                'Column-1',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            child: Container(
              color: Colors.teal,
              child: Center(
                child: Text(
                  'Column-2',
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black),
                ),
              ),
            ),
          ),
        )
      ],
    ));
  }
}

在 Scrollable 小部件中使用 MediaQuery 指定高度可能会有所帮助

以下代码将列放置在SingleChildScrollableView 小部件内，并根据MediaQuery 指定容器的高度以实现相同的目的。这会有帮助吗？ LayoutBuilder 只是为了表明使用其约束中的高度也可能导致错误，因为在这种情况下它的高度也是 infinite。

import 'package:flutter/material.dart';

class FullHeightDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: LayoutBuilder(
        builder: (context, constraints) {
          var size = MediaQuery.of(context).size;
          return Container(
            child: Row(
              children: <Widget>[
                Container(
                  height: size.height,
                  // height: constraints.maxHeight,
                  width: constraints.maxWidth / 2,
                  color: Colors.red,
                  child: Center(
                    child: Text(
                      'Column 1',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
                Container(
                  color: Colors.green,
                  height: size.height,
                  // height: constraints.maxHeight,
                  width: constraints.maxWidth / 2,
                  child: Center(
                    child: Text(
                      'Column 2',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.black),
                    ),
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }
}