Flutter 定位溢出内容没法增加事件

发布于 10 个月前 作者 phonegap100 420 次浏览 最后一次编辑是 10 个月前 来自 分享

如下图 Flutter 定位溢出内容没法增加事件

2.png

源码:

return Scaffold(
        appBar: AppBar(
          title: const Text('HomeView'),
          centerTitle: true,
        ),
        body: SingleChildScrollView(
          child: Column(children: [
            Container(
              height: 250,
              color: const Color.fromARGB(255, 73, 93, 225),
              child: Stack(clipBehavior: Clip.none, children: [
                Positioned(
                  bottom: -50,
                  left: 0,
                  right: 0,
                  child: GestureDetector(
                      onTap: () {
                        print(Random().nextDouble());
                      },
                      child: IgnorePointer(
                        ignoring: false,
                        child: Container(
                          height: 100,
                          margin: const EdgeInsets.symmetric(horizontal: 20),
                          color: const Color.fromARGB(255, 99, 73, 73),
                        ),
                      )),
                ),
              ]),
            ),
          ]),
        ));

如果您希望超出部分保持可点击状态,您应该将超出内容保留在堆栈内 解决办法

return Scaffold(
        appBar: AppBar(
          title: const Text('HomeView'),
          centerTitle: true,
        ),
        body: SingleChildScrollView(
          child: Column(children: [
            Stack(clipBehavior: Clip.none, children: [
              Column(
                children: [
                  Container(
                    width: double.infinity,
                    height: 250,
                    color: const Color.fromARGB(255, 73, 93, 225),
                    child: Text("第一个container"),
                  ),
                  Container(
                    height: 50,
                    width: double.infinity,
                    color: Colors.transparent,
                  ),
                ],
              ),
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: GestureDetector(
                    onTap: () {
                      print(Random().nextDouble());
                    },
                    child: IgnorePointer(
                      ignoring: false,
                      child: Container(
                        alignment: Alignment.bottomCenter,
                        height: 100,
                        margin: const EdgeInsets.symmetric(horizontal: 20),
                        color: const Color.fromARGB(255, 99, 73, 73),
                        child: InkWell(
                          onDoubleTap: () {
                            print("aaa");
                          },
                          child: Text("this is text"),
                        ),
                      ),
                    )),
              ),
            ]),
          ]),
        ));
  }

如果您希望超出部分保持可点击状态,您应该将超出内容保留在堆栈内

回到顶部