Flutter Widget 之Flexible

如果这些widget具有固定的大小，则按行和列排放widget很简单。

但是，如果您想要一个相对于其父级的尺寸呢？

而且，如果您想在父级的尺寸改变时，调整这些widget怎么办？

使用Flexible widget很容易做到这一点。

将行或列中的每个子级都包装到Flexible，并为其指定一个flex值

所有flex值的总和决定了每个Flexible将使用多少空间

Column(
    children: [
        Flexible(
            flex: 2,
            child: Container(color: Colors.cyan),
        ),
        Flexible(
            flex: 3,
            child: Container(color: Colors.teal),
        ),
        Flexible(
            flex: 1,
            child: Container(color: Colors.indigo),
        ),
    ]
)

因此，在这里第一个子级占据了列的三分之一，第二个子级占据了一半，最后一个子级占据了1/6

您还可以通过指定合适的宽松的或紧的尺寸来告诉Flexible其尺寸应有多严格

Column(
    children: [
        Flexible(
            flex: 2,
            fit: FlexFit.loose, // FiexFit.tight
            child: Container(
                height： 100，
                color: Colors.cyan
            ),
        ),
        Flexible(
            flex: 3,
            child: Container(color: Colors.teal),
        ),
        Flexible(
            flex: 1,
            child: Container(color: Colors.indigo),
        ),
    ]
)

在此，通过让其贴合宽松。

容器的首选尺寸占据优先

您也可以将FLexible与固定大小的widget混合使用

Column(
    children: [
        Container(
             height： 100，
             color: Colors.cyan
        ),
        Flexible(
            flex: 3,
            child: Container(color: Colors.teal),
        ),
        Flexible(
            flex: 1,
            child: Container(color: Colors.indigo),
        ),
    ]
)

如果想了解有关Flexible的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址