当我单击PageView中的按钮时，如何进入该页面? [英] How can I go to the page when I click the button in PageView?

问题描述

在Page.dart中制作了一个由6个页面组成的PageView.每个页面都有一个文本小部件，每个页面都包含一个动物名:依次为老虎，狮子，猴子，马，鸡和狗.我在main.dart中做了3个按钮.我只希望当我按下第一个按钮时，我进入页面[0](老虎页面)，当我按下第二个按钮时，我进入页面[2](猴子页面)，当我按下第三按钮时，我进入了到第[4]页(鸡页面).但是我完全不知道.我认为必须有某种方法可以解决此问题，但我找不到它.

made a PageView which consists of 6 pages in chapter.dart. Each page has a Text Widget and each of them includes an animal name: tiger, lion, monkey, horse, chicken, and dog in the order. And I made 3 buttons in main.dart. I just wish when I pushed the first button, I went to page[0] (tiger page) when I pushed the second button, I went to page[2] (monkey page), and when I pushed the third button, I went to page[4] (chicken page). But I totally had no idea. I think there must be some way to solve this problem, but I couldn't find it.

我搜索了它，并在此网站中对其进行了搜索，但是找不到它.

I googled it, and searched it in this website, but I couldn't find it.

import 'package:flutter/material.dart';

List<String> animal = ['tiger', 'lion', 'monkey', 'horse', 'chicken', 'dog'];

class Chapter extends StatefulWidget {
  @override
  _ChapterState createState() => _ChapterState();
}

class _ChapterState extends State<Chapter> {
  // int currentPage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Chapter Page'),
        ),
        body: PageView.builder(
          itemCount: animal.length,
          itemBuilder: (context, index) {
            return Center(child: Text('${animal[index]} page'));
          },
        ));
  }
}

一些参考文献会很好. 预先谢谢你.

Some references will be good. Thank you in advance.

推荐答案

您可以使用页面控制器页面控制器.检查以下代码，我在点击时添加了一个按钮以浏览第3页

You can achieve this using Page Controller Page Controller. Check below code I have added a button to navigate on page 3 on click

Main.dart类

Main.dart class

import 'package:flutter/material.dart';
import 'package:flutter_demo_app/chapter_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() {
    return _HomeScreenState();
  }
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override    
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Page View Demo'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                gotoSelectedPage(1);
              },
              child: Text('GO TO Page 1'),
            ),
            RaisedButton(
              onPressed: () {
                gotoSelectedPage(2);
              },
              child: Text('GO TO Page 2'),
            ),
            RaisedButton(
              onPressed: () {
                gotoSelectedPage(3);
              },
              child: Text('GO TO Page 3'),
            ),
            RaisedButton(
              onPressed: () {
                gotoSelectedPage(4);
              },
              child: Text('GO TO Page 4'),
            )
          ],
        ),
      ),
    );
  }

  gotoSelectedPage(int selectedPage) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Chapter(selectedPage),
      ),
    );
  }
}

Chapter.dart类

Chapter.dart class

import 'package:flutter/material.dart';

List<String> animal = ['tiger', 'lion', 'monkey', 'horse', 'chicken', 'dog'];

class Chapter extends StatefulWidget {
final initialPage;

  Chapter(this.initialPage);
      @override
      _ChapterState createState() => _ChapterState();
    }

class _ChapterState extends State<Chapter> {
  PageController _pageController;

  @override
  void initState() {
    _pageController = PageController(initialPage: widget.initialPage);
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chapter Page'),
      ),
      body: PageView.builder(
    controller: _pageController,
    itemCount: animal.length,
    itemBuilder: (context, index) {
      return Center(
        child: Text('${animal[index]} page'),
      );
    },
  ),
    );
  }
}

这篇关于当我单击PageView中的按钮时，如何进入该页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！