Flutter：如何使 BoxShadow 溢出兄弟小部件？

Question

我有一个 Row 和两个 Expanded 小部件作为其子级。因此，孩子之间没有空间/填充。每个孩子都包含一个Container（带有盒子装饰），而后者又包含一个FlatButton。当FlatButton 突出显示时，BoxShadow 会出现在Container 周围。

对于第二个按钮，阴影看起来很好，溢出了第一个按钮的一部分。但是，当第一个按钮被突出显示时，BoxShadow 的右侧（应该是“超过”第二个按钮）被剪掉。我认为这是因为第二个按钮（及其各自的祖先）在小部件树中的第一个按钮之后，因此“更高”。

这是我为演示该问题而制作的 DartPad 实例：https://dartpad.dev/3e1eaa23c2848ada0104bded02e1510a

我的问题本质上是如何以完全相同的布局实现，即。按钮之间没有空间，每个按钮的阴影都会出现在另一个按钮上。即示例中“Button1”的阴影与“Button2”的阴影相同；

谢谢！

Answer 1

您好，您可以查看修改后的代码。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('App Name'),
      ),
      body: new Container(
        child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Center(
                child: new Row(
              children: [
                Expanded(
                    child: Container(
                  color: Colors.white,
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
                    child: Container(
                        decoration: BoxDecoration(boxShadow: [
                          BoxShadow(
                            color: Colors.transparent,
                            blurRadius: 5.0,
                          ),
                        ]),
                        child: TestButton("Button1")),
                  ),
                )),
                Expanded(
                    child: Container(
                  color: Colors.white,
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
                    child: Container(
                        decoration: BoxDecoration(boxShadow: [
                          BoxShadow(
                            color: Colors.transparent,
                            blurRadius: 5.0,
                          ),
                        ]),
                        child: TestButton("Button2")),
                  ),
                ))
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
            ))),
        padding: const EdgeInsets.all(0.0),
        alignment: Alignment.center,
      ),
    );
  }
}

class TestButton extends StatefulWidget {
  @required
  final String title;

  TestButton(this.title);

  @override
  _TestButtonState createState() => _TestButtonState();
}

class _TestButtonState extends State<TestButton> {
  bool isHighlighted = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 50,
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(isHighlighted ? 0.5 : 0.0),
            spreadRadius: isHighlighted ? 5 : 0,
          )
        ]),
        child: FlatButton(
          shape: ContinuousRectangleBorder(borderRadius: BorderRadius.zero),
          splashColor: Colors.black12,
          color: Colors.white,
          hoverColor: Colors.black12,
          highlightColor: Colors.black12,
          mouseCursor: MouseCursor.uncontrolled,
          child: Text(widget.title),
          onPressed: () => null,
          onHighlightChanged: (value) {
            setState(() {
              isHighlighted = value;
            });
          },
        ));
  }

  @override
  void dispose() {
    super.dispose();
  }
}