位于堆栈中的负Y偏移的压力机上的Flutter问题

qfe3c7zg 于 2023-10-22 发布在 Flutter

关注(0)|答案(2)|浏览(121)

我有两个小部件在一个堆栈中。这在下面演示。

第二个控件是一个按钮，它位于一个Y轴为负的定位控件中。
问题是溢出是不可点击的。我有什么办法来解决这个问题吗？

Stack(
    fit: StackFit.expand,
    overflow: Overflow.visible,
    clipBehavior: Clip.none,
    alignment: AlignmentDirectional.topCenter,
    children: [
      ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(29)),
        child: ClipPath(
          clipper: NavbarClipper(),
          child: Container(
            color: Colors.white,
          ),
        ),
      ),
      Positioned(
        top: -30,
        child: Container(
          width: context.dynamicHeight(0.16),
          height: context.dynamicWidth(0.16),
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () {},
              backgroundColor: Colors.orange,
              child: Icon(Icons.ac_unit),
            ),
          ),
        ),
      )
    ],
  )

谢谢.

flutter

来源：https://stackoverflow.com/questions/65156211/flutter-on-press-problem-with-negative-y-offset-positioned-in-a-stack

2条答案

按热度按时间

txu3uszq1#

你可以用填充代替负边距来 Package 矩形按钮

class MyHomePage extends StatefulWidget {
  MyHomePage();

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

class _MyHomePageState extends State<MyHomePage> {
  Color color = Colors.orange;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 200,
        padding: EdgeInsets.all(32),
        child: Stack(
          fit: StackFit.expand,
          clipBehavior: Clip.none,
          alignment: AlignmentDirectional.topCenter,
          children: [
            Padding(
              padding: EdgeInsets.only(top: 30),
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                child: ClipRRect(
                  child: Container(
                    color: Colors.blue,
                  )
                ),
              ),
            ),
            Positioned(
              top: 0,
              child: Container(
                width: 50,
                height: 50,
                child: FittedBox(
                  child: FloatingActionButton(
                    onPressed: () {
                      setState((){
                        color = (color == Colors.red) ? Colors.orange : Colors.red;
                      });
                    },
                    backgroundColor: color,
                    child: Icon(Icons.ac_unit),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-10-22

hmtdttj42#

下面是solution，使用列而不是堆栈，并使用带有一些偏移量的transform.translate。

赞(0）回复(0）举报 2023-10-22