BoxShadow 在抖动中蔓延到整个屏幕宽度

Question

我正在尝试将 boxShadow 添加到 Container，但 BoxShadow 遍布整个屏幕宽度，而不是 Sized Box 的宽度。为了进一步解释 Container 是 SizedBox 的 child 并且 SizedBox 在 Column 中 crossAxisAlignment 是 Column 的 stretch。代码如下。

class _AudioDetailsState extends State<AudioDetails> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(heading: "Audio Player"),
      body: SafeArea(
        child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Colors.blue, Colors.blue.shade50],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter),
            ),
            padding: const EdgeInsets.all(10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                ClipOval(
                  child: SizedBox(
                    height: 150,
                    width: 150,
                    child: Container(
                        height: 125,
                        width: 125,
                        decoration: BoxDecoration(boxShadow: [
                          BoxShadow(
                            blurRadius: 5,
                            color: Colors.grey.withOpacity(0.5),
                            spreadRadius: 5,
                          )
                        ]),
                        child: const CircleAvatar(
                          backgroundColor: Colors.amber,
                        )),
                  ),
                )
              ],
            )),
      ),
    );
  }
}

下面给出了当前输出的图像

Answer 1

这是因为 crossAxisAlignment 值，使用 CrossAxisAlignment.stretch 会在横轴上延伸 children。

文档说“如果 child 想要与其 parent 不同的大小并且 parent 没有足够的信息来对齐它，那么 child 的大小可能会被忽略。定义对齐方式时要具体。"

要解决此问题，您可以使用其他 crossAxisAlignment 值并将设备宽度提供给 parent Container


Container(
  width: MediaQuery.of(context).size.width,
  child: Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
  ClipOval(
  ...

或将 child 变形为 Align

 Align(
   child: ClipOval(
      child: SizedBox(
            height: 150,
            width: 150,
            child: Container(
                height: 125,
                width: 125,
                decoration: BoxDecoration(boxShadow: [
                  BoxShadow(
                     blurRadius: 5,
                     color: Colors.grey.withOpacity(0.5),
                     spreadRadius: 5,
                   )
                   ]),
                 child: const CircleAvatar(
                          backgroundColor: Colors.amber,
                        ),
                      ),
                    ),
                  ),
                )

BoxShadow 在抖动中蔓延到整个屏幕宽度

BoxShadow is spreading over full screen width in flutter

dart

flutter

flutter-layout