Question

在此代码中，当我更改页面时（我在下面的代码中使用的是 PageView）flutter 不会触发重建，因此条件 if(_page == 1) 将在我按下“热重载”后生效。任何解决方法的提示？我在 main.dart (HomePage) 中调用这个类，它是无状态小部件。这可能是问题吗？感谢您的帮助！

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

int _page = 0;

class Guide extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new GuideState();
  }
}

class GuideState extends State<Guide> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Center(
                child: Column(children: [
      if (_page == 1)
        Padding(
            padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
            child: Image(
                image: AssetImage('graphics/Logo.png'),
                height: MediaQuery.of(context).size.height * 0.1)),
      SizedBox(height: 500, child: Page()),
    ]))));
  }
}

class Page extends StatefulWidget {
  PageState createState() => PageState();
}

class PageState extends State<Page> {
  final controller = PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //appBar: AppBar(title: Text('PageView Widget in Flutter')),
        body: Center(
            child: Container(
      width: MediaQuery.of(context).size.width * 0.95,
      height: MediaQuery.of(context).size.height * 0.6,
      child: PageView(
        controller: controller,
        onPageChanged: (page) {
          setState(() {
            if (page == 1) {
              _page = 1;
            }
          });
        },
        pageSnapping: true,
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
              //color: Colors.pink,
              //child: Center(
              child: Text(
            '1. Tento text bude nahrán z databáze.',
            style: TextStyle(fontSize: 25, color: Colors.black),
          )),
          Container(
              //color: Colors.green,
              child: Text(
            '2. Tento text bude nahrán z databáze',
            style: TextStyle(fontSize: 25, color: Colors.black),
          )),
          Container(
              // color: Colors.lightBlue,
              child: Text(
            '3. Tento text bude nahrán z databáze',
            style: TextStyle(fontSize: 25, color: Colors.black),
          )),
        ],
      ),
    )));
  }
}

Answer 1

变量 _page 设置为全局变量，它必须作为状态的一部分才能触发更改，但在您的情况下，您想根据另一个子小部件中的操作更改小部件，这可以完成根据您的选择，您可以通过多种方式将一个函数用作子小部件的参数 Page :

class Page extends StatefulWidget {
  final Function(int) onChange;

  const Page({Key key, this.onChange}) : super(key: key);

  PageState createState() => PageState();
}

然后在页面变化时调用它

onPageChanged: (page) {
  widget.onChange(page);
},

因此，您可以处理父小部件中的更改并触发状态更改

class GuideState extends State<Guide> {
  int _page = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            children:[
              if (_page == 1)
                Padding(
                  padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
                  child: Image(
                    image: AssetImage('graphics/Logo.png'),
                    height: MediaQuery.of(context).size.height * 0.1,
                  ),
                ),
              SizedBox(
                height: 500,
                child: Page(
                  onChange: (page) {
                    setState(() => _page = page);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

int _page = 0; 不是您的 Guide 小部件状态的一部分。把它放在这里：

class GuideState extends State<Guide> {
   int _page = 0;
   ...

有状态小部件不会改变状态

2 个答案: