要扩展的行和列布局占屏幕总宽度的百分比

Question

我不熟悉Flutter，正在尝试创建一个行/列布局，该行具有包含容器区域的行，然后可以使用专门的小部件填充容器区域，但是我一直在努力获取适当的布局。

我已经手动将宽度手动编码到列和容器中，但是我想将布局划分为1/3 2/3，并在列周围填充一些空白

 body: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start,
            children: [
            Padding(
              padding: const EdgeInsets.only(bottom:8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(height: 20.0, width:100, color: Colors.yellow),
                  Container(height: 220.0, width:100,color: Colors.green),
                ],
              ),
            ),
            Container(height: 200.0,width:100, color: Colors.cyan),
          ]),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child:  Container(width:600,color: Colors.amber),
         
          ),
        
      ]),

这会产生一个布局，但是它是硬编码的，我想使用当前设备屏幕宽度的百分比。

Answer 1

行和列取其父级的大小，如果没有，则取其内容的大小。为此，您可以将“容器”放置在行的前面并指定其大小。有点像这样容器（宽度：MediaQuery.of（context）.size.width * 0.75，孩子：行（0.75表示75％