Flutter使用FractionallySizedBox组件报错Failed assertion: line 2164 pos 12: 'hasSize'

这里从解决方法那里直接给出个有效的方式。
就是如果你使用了FractionallySizedBox组件,
第一是这个组件只能在固定宽高下或者Row,Flex,Column组件下使用。
第二就是这个组件需要在Flexible下使用.

结构就是:

Row
  -> Flexible
      -> FractionallySizedBox

给出简单的代码示例:

Row(
  children:[
    Flexible(fit: FlexFit.tight, child: FractionallySizedBox(widthFactor: 0.6,heightFactor: 1,child: Text("123")),
    Flexible(fit: FlexFit.tight, child: FractionallySizedBox(widthFactor: 0.6,heightFactor: 1,child: Text("456")),
    Flexible(fit: FlexFit.tight, child: FractionallySizedBox(widthFactor: 0.6,heightFactor: 1,child: Text("789")),
  ]
)

另一个示例(来源于链接中的):

Container(
    height: 24.0, 
    color: Colors.black, 
    child: Row(
        children: [
            Flexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.25,
                    child: Container(color: Colors.orange),
                ),
            ),
            Flexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.15,
                    child: Container(color: Colors.green)),
            ),
            Flexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.05,
                    child: Container(color: Colors.blue)
                ),
            ),
        ]
    )
)

间距均匀的条形图
间距均匀的条形图

来自stackoverflow的详细解决方法

posted @ 2025-01-16 17:37  星小梦  阅读(81)  评论(0)    收藏  举报