Question

我连续有两个自定义弹出按钮，它们是由堆栈构成的兄弟姐妹。每个堆栈都有一个切换按钮和一个弹出菜单。切换按钮会打开弹出菜单。

一个堆栈的弹出窗口应覆盖另一个堆栈的切换按钮，但事实并非如此。

处于正常状态的按钮：

弹出时，同级弹出按钮位于弹出窗口“上方”

这是理想的结果：

通过将行的TextDirection设置为RightToLeft，然后反转子数组，我设法找到了解决方案，但这很麻烦，在所有情况下都行不通。

这是按钮的代码：

class _EntrySheetButton extends StatefulWidget {
  final IconData icon;
  final Widget child;

  const _EntrySheetButton({
    Key key,
    @required this.icon,
    @required this.child,
  }) : super(key: key);

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

class __EntrySheetButtonState extends State<_EntrySheetButton> {
  bool _menuShown = false;
  final _iconButtonConstraints = BoxConstraints(minHeight: 40, minWidth: 40);

  void _toggleMenu() {
    setState(() {
      _menuShown = !_menuShown;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
      child: Stack(
        alignment: Alignment.bottomLeft,
        fit: StackFit.loose,
        overflow: Overflow.visible,
        children: <Widget>[
          IconButton(
            icon: Icon(widget.icon),
            onPressed: _toggleMenu,
            constraints: _iconButtonConstraints,
          ),
          if (_menuShown)
            Positioned(
              left: 0,
              bottom: 0,
              child: Card(
                margin: EdgeInsets.all(0),
                elevation: 4,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8)),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    widget.child,
                    IconButton(
                      icon: Icon(Icons.close),
                      onPressed: _toggleMenu,
                      constraints: _iconButtonConstraints,
                    )
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }
}

Answer 1

我找到了一个使用覆盖和覆盖条目的解决方案，该解决方案解决了我在堆栈上遇到的另一个问题（无法检测到堆栈溢出子手势https://github.com/flutter/flutter/issues/19445）

这篇精彩的文章提供了有关叠加层的更多信息：

https://medium.com/saugo360/https-medium-com-saugo360-flutter-using-overlay-to-display-floating-widgets-2e6d0e8decb9

有没有办法在颤动中配置小部件的z轴？

1 个答案: