如果你想将屏幕横向分为3个区间,并在每个区间中响应点击事件,可以使用Flutter中的GestureDetector组件配合计算坐标来实现。

首先,你需要引入flutter库和material库:

import 'package:flutter/material.dart';

然后,创建一个StatefulWidget,并在其build方法中返回一个GestureDetector组件。在GestureDetector的child属性中,你可以使用一个Container来表示屏幕的横向区间。并设置Container的width为屏幕宽度的三分之一。

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double thirdWidth = screenWidth / 3;

    return GestureDetector(
      onTapUp: (TapUpDetails details) {
        // 计算点击的x坐标
        double x = details.localPosition.dx;

        // 判断点击的位置在哪个区间
        if (x < thirdWidth) {
          // 在第一个区间点击
          print('点击了第一个区间');
        } else if (x < thirdWidth * 2) {
          // 在第二个区间点击
          print('点击了第二个区间');
        } else {
          // 在第三个区间点击
          print('点击了第三个区间');
        }
      },
      child: Container(
        width: thirdWidth,
        color: Colors.blue,
      ),
    );
  }
}

最后,在main函数中启动你的应用程序,并使用MyWidget作为根部件:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

这样,当你在屏幕上点击不同的区间时,相应的输出信息将会打印到控制台上。你可以根据需要在每个区间中执行不同的操作。

flutter GestureDetector 屏幕横向3份区间点击

原文地址: https://www.cveoy.top/t/topic/i9da 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录