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

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％