Question

我正在将一个应用程序分为两个部分：一个（上部）是PageView小部件区域，另一个（下部）是Container小部件区域。当我在上部更改页面时，我希望下部显示“我们在X页面中”。

我尝试在Container小部件中使用PageView小部件的index，但是控制台说“未定义名称'index'”。因此，我像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小部件中使用“索引”吗？

2 个答案: