flutter 在容器上贴胶带时,手势探测器不工作

xsuvu9jc  于 2023-06-30  发布在  Flutter
关注(0)|答案(2)|浏览(94)

我已经在Flutter中创建了一个自定义导航栏,但是GestureDetector不起作用,所以我被困在一个页面上。
下面是代码。

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    bool _isMapsSelected = true;

    // return const SearchPageTab();
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.grey,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        title: ClipRRect(
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(FizzinConstants.radius),
                topRight: Radius.circular(FizzinConstants.radius)),
            child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 15.0,
                  sigmaY: 25.0,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      onTap: () => {
                        setState(() {
                          _isMapsSelected = true;
                        })
                      },
                      child: Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(FizzinConstants.radius),
                          color: _isMapsSelected
                              ? FizzinColors.cVividBlue
                              : Colors.transparent,
                        ),
                        child: Text(
                          'Maps',
                          style: _isMapsSelected
                              ? const TextStyle(
                                  color: Colors.white,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold)
                              : const TextStyle(
                                  color: FizzinColors.cDarkGrey,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: () => {
                              setState(() {
                                _isMapsSelected = false;
                              })
                            },
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            borderRadius:
                                BorderRadius.circular(FizzinConstants.radius),
                            color: _isMapsSelected
                                ? Colors.transparent
                                : FizzinColors.cVividBlue,
                          ),
                          child: Text(
                            'Discover',
                            style: _isMapsSelected
                                ? const TextStyle(
                                    color: FizzinColors.cDarkGrey,
                                    fontSize: 14,
                                    fontWeight: FontWeight.bold)
                                : const TextStyle(
                                    color: Colors.white,
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold),
                          ),
                        )),
                  ],
                ))),
      ),
      body: _isMapsSelected ? const MapContentTab() : const SearchContentTab(),
    );
  }
}

A尝试了AbsorbPointer函数,但它不起作用,我尝试的Discover文本的顶部永远不会被捕获
任何想法为什么>

wa7juj8i

wa7juj8i1#

试试这个:

return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.grey,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        title: ClipRRect(
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(FizzinConstants.radius),
                topRight: Radius.circular(FizzinConstants.radius)),
            child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 15.0,
                  sigmaY: 25.0,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    InkWell(
                      onTap: (){
                        setState(() {
                          _isMapsSelected = true;
                        });
                      },
                      child: IgnorePointer(
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            borderRadius:
                            BorderRadius.circular(FizzinConstants.radius),
                            color: _isMapsSelected
                                ? FizzinColors.cVividBlue
                                : Colors.transparent,
                          ),
                          child: Text(
                            'Maps',
                            style: _isMapsSelected
                                ? const TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.bold)
                                : const TextStyle(
                                color: FizzinColors.cDarkGrey,
                                fontSize: 14,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    ),
                    InkWell(
                      onTap: (){
                        setState(() {
                          _isMapsSelected = false;
                        });  
                      },
                      child: IgnorePointer(
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            borderRadius:
                            BorderRadius.circular(FizzinConstants.radius),
                            color: _isMapsSelected
                                ? Colors.transparent
                                : FizzinColors.cVividBlue,
                          ),
                          child: Text(
                            'Discover',
                            style: _isMapsSelected
                                ? const TextStyle(
                                color: FizzinColors.cDarkGrey,
                                fontSize: 14,
                                fontWeight: FontWeight.bold)
                                : const TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    ),
                  ],
                ))),
      ),
      body: _isMapsSelected ? const MapContentTab() : const SearchContentTab(),
    );
9cbw7uwe

9cbw7uwe2#

我明白了,你是在构建方法本身中创建变量,所以当状态改变时,它每次都会为true。
你只需要把这个bool _isMapSelected = true放在build方法之外

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  bool _isMapsSelected = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // your code will be here as it is.
    );
  }
}

相关问题