我想在 Flutter 中将我的行分成 1/4 的比例

Question

我想将颤振中的行分成 4 列，宽度相同。到目前为止，我想出的解决方案是这样的，

   child: Row(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.yellow),
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.blue),
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.white),
          ),
        ],
      ),

有没有什么替代方法。在这种方法中，将行分成 1/3 的比例也不起作用。

Answer 1

您可以通过使用 Expanded Widget

检查下面的代码：

它工作得很好。

1) 1/3 比例

Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.yellow),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.blue),
          ),
        ),
      ],
    ),

1) 对于 1/4 比率

Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.yellow),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.blue),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.white),
          ),
        ),
      ],
    ),

请参阅下面的输出：

我希望这回答了你的问题。

Answer 2

您可以使用Expanded或Flexible，默认情况下有flex: 1，您可以根据需要更改值。

  Row(
    children: [
      Expanded(
        flex: 1, // you can play with this value, by default it is 1
        child: Child1(),
      ),
      Expanded(
        flex: 1, 
        child: Child2(),
      ),
      Expanded(
        flex: 1, 
        child: Child3(),
      ),
      Expanded(
        flex: 1, 
        child: Child4(),
      ),
    ],
  );