在颤动中设置列宽

Question

我需要设置一个飘动的列宽,我必须做3个部分的布局,一个应该是屏幕的20%,另一个是60%,最后一个是20%.我知道那3列应该是一行,但我不知道设置大小的方法,当我这样做时,3列的大小相同.

我将不胜感激任何反馈.

Answer 1

我建议使用Flex类似的,而不是硬编码大小

Row(
      children: <Widget>[
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.red),
        ),
        Expanded(
          flex: 6, // 60%
          child: Container(color: Colors.green),
        ),
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.blue),
        )
      ],
    )

哪个会产生如下,

Answer 2

限制widtha 的Column可能是

1. 限制width的Column本身，使用SizedBox

   SizedBox(
     width: 100, // set this
     child: Column(...),
   )
   

2 (A)。限制width的children里面Column，没有硬编码值

Row(
  children: <Widget>[
    Expanded(
      flex: 3, // takes 30% of available width 
      child: Child1(),
    ),
    Expanded(
      flex: 7, // takes 70% of available width  
      child: Child2(),
    ),
  ],
)

2（乙）。限制width的children内部Column，用硬编码值。

Row(
  children: <Widget>[
    SizedBox(
      width: 100, // hard coding child width
      child: Child1(),
    ),
    SizedBox(
      width: 200, // hard coding child width
      child: Child2(),
    ),
  ],
)