flutter - 在自定义小部件顶部添加飞溅效果

Question

我有以下小部件：

class _BuildingItem extends StatelessWidget {

  final String address;
  final String zip;
  final String zipCityName;
  final Image image;

  const _BuildingItem({Key? key,
    required this.address,
    required this.zip,
    required this.zipCityName,
    required this.image
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      child: Column(
        children: [
          ClipRect(
              child: image,
          ),
          Container(
            color: Colors.lightBlue,
            child: DefaultTextStyle(
              style: TextStyle(
                color: Colors.white,
                fontFamily: "Roboto",
                fontSize: 20,
              ),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.only(top: 5.0),
                    child: Text(
                        this.address
                    ),
                  ),
                  Container(
                      padding: EdgeInsets.symmetric(vertical: 5.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                              this.zip + ", "
                          ),
                          Text(
                              this.zipCityName
                          ),
                        ],
                      )
                  ),
                ],
              ),
            ),
          ),
        ],
      )
    );
  }
}

我希望在此小部件之上添加飞溅效果。将小部件包装在 InkWell 中并不像我想要的那样工作，因为它会将飞溅效果放在父小部件上。我可能对此视而不见，但我应该如何在这个小部件内“合并”一个 InkWell 以在其上呈现飞溅效果？

标签： flutter

Answer 1

通过将小部件放入堆栈中并添加一个 Material 和 InkWell 小部件作为该堆栈的第二个子级来解决（以便将 InkWell 和 Material 小部件放在原始自定义小部件的顶部）。