我可以在其他小部件的 PageView 小部件中使用 'index' 吗？

Question

我正在制作一个分为两个部分的应用程序：一个（上部）是 PageView 小部件区域，另一个（下部）是 Container 小部件区域。当我在上部更改页面时，我希望下部显示 'we are in X page'。

我尝试在 Container 小部件中使用 index 的 PageView 小部件，但控制台显示 "undefined name 'index'"。于是我声明like int index;为全局变量，又试了下，还是不行。我认为这个 index 与 PageView 小部件的 index 不同。

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final controller = PageController(initialPage: 0);
  var scrollDirection = Axis.horizontal;
  var actionIcon = Icons.swap_vert;
  int index;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        centerTitle: true,
        title: Text('it\'s a drill for page view'),
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return SafeArea(
      child: Column(
        children: <Widget>[
          Expanded(
            child: PageView.builder(
              controller: controller,
              itemCount: 5,
              itemBuilder: (context, index) {
                return Text('it is ${index} page');
              },
            )
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.fitWidth,
              child: Container(
                color: Colors.blue,
                child: Text('we are in ${index} page!'),
              ),
            ),
          )
        ],
      ),
    );
  }
}

我是编程初学者，并将其作为一种爱好。但我真的很喜欢它。其实我现在放弃了自己的学业和事业，坚持编程。我希望你帮我解决这个问题。谢谢你。我爱你。

Answer 1

是的。喜欢当前页面的 controller.page。

class Sample extends StatelessWidget{

final int value;
Sample(this.value);

build(context) => Text("you are in $value");
}

并使用Sample(controller.page)

编辑：您的代码应该是

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final controller = PageController(initialPage: 0);
  var scrollDirection = Axis.horizontal;
  var actionIcon = Icons.swap_vert;
  int currentPage=0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        centerTitle: true,
        title: Text('it\'s a drill for page view'),
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return SafeArea(
      child: Column(
        children: <Widget>[
          Expanded(
              child: PageView.builder(
                controller: controller,
                itemCount: 5,
                itemBuilder: (context, index) {
                  return Text('it is ${index} page');
                },
                onPageChanged: (page){
                  setState(() {
                    currentPage=page;
                  });
                },
              )
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.fitWidth,
              child: Container(
                color: Colors.blue,
                child: Text('we are in ${currentPage} page!'),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Answer 2

像这样给 PageController 添加监听器：

  @override
  void initState() {
    super.initState();
    index = 0;
    controller.addListener(() {
      setState(() {
        index = controller.page.toInt();
      });
    });
  }

我可以在其他小部件的 PageView 小部件中使用 'index' 吗？

Can I use 'index' in PageView widget in other widget?

pageviews

dart

flutter