使用Flutter检测左右滑动并在PageView中调用每个有效滑动的函数

llew8vvj 于 2023-03-03 发布在 Flutter

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

我想在每次有效的页面滑动时调用一个函数。
1.一开始我看到的是A。
enter image description here
1.然后，如果我拖动页面在水平的小数额，然后它显示下一页的一些部分，如上图...
到现在还可以，我也要这个。

这是我的代码

- 主页. dart**

import 'package:flutter/material.dart';

List<String> dataList = ["A", "B", "C", "D", "E", "F", "G"];
int pointer = (-1);

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("THIS IS APPBAR"),
      ),
        body: PageView.builder(
            itemCount: dataList.length,
            itemBuilder: (BuildContext context, int index) {
              print("Page No. $index");
              return MyPage(index: index,);
            })
    );
  }
}

class MyPage extends StatelessWidget {
  final int index;

  const MyPage({super.key, required this.index});

  @override
  Widget build(BuildContext context) {
    pointer += 1;
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.all(15.0),
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.blueAccent)
        ),
        child: Center(
          child: Text(dataList[pointer], style: const TextStyle(fontSize: 30),),
        ),
      ),
    );

  }
}

- 主省道**

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'my_provider.dart';
import 'home_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

但是，在下一次滑动中，它在下一次有效滑动时显示"C"而不是"B"（随着指针值的增加）。
在输出中，它显示Page No. 0Page No. 0Page No. 1，但我在第0页。
如何做到这一点在顺利的方式..谢谢

flutter

来源：https://stackoverflow.com/questions/75626945/detect-left-or-right-swipe-and-call-function-every-valid-swipe-in-pageview-using

2条答案

按热度按时间

svujldwt1#

"我在帮你解决问题"

代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

List<String> dataList = ["A", "B", "C", "D", "E", "F", "G"];

int pointer = 0;

class Swipefunctions extends StatefulWidget {
  const Swipefunctions({Key? key}) : super(key: key);
  @override
  State<Swipefunctions> createState() => _SwipefunctionsState();
}

class _SwipefunctionsState extends State<Swipefunctions> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("THIS IS APPBAR"),
        ),
        body: PageView.builder(
            onPageChanged: (int index) {
              print("prinetd");
              setState(() {
              pointer++;
              pointer=index;
              });
            },
            itemCount: dataList.length,
            itemBuilder: (BuildContext context, int index) {
              return MyPage(index: index,);
            })
    );
  }
}

class MyPage extends StatefulWidget {
  final int index;

  const MyPage({super.key, required this.index});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {


  @override
  Widget build(BuildContext context) {
    print("pointer at $pointer");
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.all(15.0),
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.blueAccent)
        ),
        child: Center(
          child: Text(dataList[pointer], style: const TextStyle(fontSize: 30),),
        ),
      ),
    );

  }
}

Video Link

赞(0）回复(0）举报 2023-03-03

ruarlubt2#

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

List<String> dataList = ["A", "B", "C", "D", "E", "F", "G"];

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("THIS IS APPBAR"),
      ),
        body: PageView.builder(
            itemCount: dataList.length,
            itemBuilder: (BuildContext context, int index) {
              return MyPage(index: index,);
            })
    );
  }
}

class MyPage extends StatelessWidget {
  final int index;

  const MyPage({super.key, required this.index});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.all(15.0),
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.blueAccent)
        ),
        child: Center(
          child: Text(dataList[index], style: const TextStyle(fontSize: 30),),
        ),
      ),
    );

  }
}

我已经编辑了你的代码，请检查。希望这能有所帮助

赞(0）回复(0）举报 2023-03-03

我来回答

使用Flutter检测左右滑动并在PageView中调用每个有效滑动的函数

这是我的代码

2条答案

相关问题

热门标签

最新问答