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

Question

我想将 flutter 中的行分成 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) For 1/3 ratio

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) For 1/4 ratio

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),
          ),
        ),
      ],
    ),

请参阅下面的输出:





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