扩展和灵活不填满整行

如何解决扩展和灵活不填满整行

你好，我有以下代码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,body:
       Column(
        crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.start,children: [
          Row(
            mainAxisSize: MainAxisSize.max,children: [
             // FlexibleWidget(),ExpandedWidget(),FlexibleWidget(),],),Row(
            children: [
              ExpandedWidget(),Row(mainAxisSize: MainAxisSize.min,children: [
              FlexibleWidget(),);
  }
}

class ExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        decoration: Boxdecoration(
          color: Colors.green,border: Border.all(color: Colors.white),child: Padding(
          padding: const EdgeInsets.all(16.0),child: Text(
            'Expanded',style: TextStyle(color: Colors.white,fontSize: 24),);
  }
}

class FlexibleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Container(
        decoration: Boxdecoration(
          color: Colors.red,child: Text(
            'Flexible',style: TextStyle(color: Colors.black,);
  }
}

结果是这样的：

设置灵活小部件后，第一个容器不应该填充剩余的空间吗？由于它也属于具有 2 个扩展小部件的子级的列，因此列宽大小应该是整个屏幕。这意味着该行也应该是整个屏幕。我原以为第一行中展开的绿色小部件会填充该行，直到没有如下图所示的白色为止：

相反，它只填满了一半的页面。谁能解释一下这种行为？

解决方法

在进入正题之前，让我先从 FlexFit 开始。 FlexFit.tight 允许孩子们填满其余的空间，但 FlexFit.loose 允许孩子们根据自己的需要调整自己的大小。

现在，您可能知道 Expanded 只不过是紧身灵活，即 fit: FlexFit.tight。

Expanded(
  child: child,)

is equivalent to

Flexible(
  fit: FlexFit.tight,child: child,)

现在，让我们以你的例子为例。

对于第一个块，有两个widget Flex 1（默认），将屏幕分成两半；每人将获得 50%。这并不意味着他们必须占据屏幕的 50%。这意味着它们可以扩展到屏幕的 50%。所以，Expanded 小部件就是这样做的。贴合度高，占屏幕的50%。

来到 Flexible 小部件，默认情况下，它是宽松的。所以它告诉它的孩子们，他们可以扩展到 50%，但没有限制他们必须占据所有空间。他们可以占用任何他们想要的空间，但上限设置为 50%。在您的情况下，它只需要空间来适应带有一些填充的“灵活”文本。所以它需要。