Question

我有一个应用程序，用户可以在其中使卡进入加载状态（例如卡上有一个拨动开关）。我希望该卡在加载时具有透明的灰色覆盖层，并在调用服务器时带有圆形加载指示器。这一切都可以在下面的代码中正常使用。

但是，为了使覆盖层覆盖整个卡（并确保覆盖所有设备尺寸），由于double.infinity引起了异常，因此我不得不将宽度设置为任意高数字。有没有更好的方法来完成我的工作？

Card(
  child: Stack(
    fit: StackFit.expand,
    children: <Widget>[
      ListTile(
        title: Text('Title'),
        subtitle: Text('Subtitle'),
      ),
      Center(
        child: Opacity(
          opacity: isLoading ? 1.0 : 0.0,
          child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Color(0xff3d6be1)))
        )
      ),
      Positioned(
        top: 0,
        left: 0,
        child: Opacity(
          opacity: isLoading ? 0.5 : 0.0,
          child: SizedBox(
            height: 150,
            width: 100000, // <---- this seems hacky
            child: const DecoratedBox(
              decoration: const BoxDecoration(
                color: Colors.grey
              ),
            )
          )
        )
      ),

    ]
  )
)

Answer 1

尝试使用Positioned.fill

它将创建一个Positioned对象，将[left]，[top]，[right]和[bottom]设置为0.0，除非传递了它们的值

Stack(
  children: <Widget>[
    Positioned.fill(
      child: Opacity(
        //
      ),
    ),
  ],
);

Answer 2

要更好地控制宽度，您可以使用媒体查询：

double width = MediaQuery.of(context).size.width; <-- Here

Card(
    child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
            ListTile(
                title: Text('Title'),
                subtitle: Text('Subtitle'),
                ),
            Center(
                child: Opacity(
                    opacity: isLoading ? 1.0 : 0.0,
                    child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Color(0xff3d6be1)))
                )
            ),
            Positioned(
                top: 0,
                left: 0,
                child: Opacity(
                    opacity: isLoading ? 0.5 : 0.0,
                    child: SizedBox(
                        height: 150,
                        width: width,      <-- And here use it
                        child: const DecoratedBox(
                        decoration: const BoxDecoration(
                        color: Colors.grey
                        ),
                        )
                    )
                )
            ),
        ]
    )
)

因此您正在使用设备的确切宽度。

Flutter：在堆栈中放置了SizedBox叠加层以显示加载情况似乎很困难

2 个答案: