颤振:在堆栈中定位 SsizeBox 叠加层以显示加载似乎很笨拙

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

它创建一个 [左]、[上]、[右] 和 [下] 设置为 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
),
)
)
)
),
]
)
)

因此，您使用的是设备的确切宽度。