我是Flutter的新手，并且与SetState操作绑定，我试图以逐块的方式组织代码，但是setState无法正常工作，

时间：2019-11-17 17:53:34

标签： flutter dart

这是我正在使用的代码，我在lib文件夹中创建了一个新文件夹名称HomePage，并将Home.dart文件放置在其中，直到我进入setState为止，一切都很棒。 setState根本无法正常工作。

Main.Dart代码

import 'package:flutter/material.dart';
import 'package:test_project1/HomePage/Home.dart';

main() => runApp(new DarkX());

class DarkX extends StatefulWidget {

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

}

class DarkXState extends State<DarkX>{

@override
  Widget build(BuildContext context) {
    var home = new DarkXAppHomePage().createHomePage();
    return home;
  }

}

Home.Dart代码`

import 'package:flutter/material.dart';

class DarkXAppHomePage {

    var _isLoading = true;

    createHomePage(){
        var homePageScaffold = createHomePageScaffold();
        return MaterialApp(home: homePageScaffold, debugShowCheckedModeBanner: false);
    }


    //Scaffold For Home Page
    createHomePageScaffold(){
      var homeAppbar = homeAppBar();
      var homebody = homeBody();
      var scaffold = new Scaffold(appBar: homeAppbar, body: homebody,);
      return scaffold;
    }

    //AppBar For Home Page
    homeAppBar(){
      var text = createText('Welcome');
      var refreshbutton = refreshButton(refreshHomePage);
      var appBar = new AppBar(title: text,actions: <Widget>[refreshbutton],);
      return appBar;
    }

    //Body For Home Page
    homeBody(){
      var loadingState = _isLoading ? CircularProgressIndicator() : createText('Finished Loading');
      return new Center(child: loadingState);
    }

    refreshButton(Function onPress){
      var refreshicon = refreshIcon();
      var refreshbutton = new IconButton(icon: refreshicon, onPressed: (){
        onPress();
      },);
      return refreshbutton;
    }

    //homepage Refresh Action
    refreshHomePage(){
      setState(){
        _isLoading = false;
      }
    }

    //Create Text
    createText( String text ){
      var newText = new Text(text);
      return newText;
    }

    //Refresh Icon
    refreshIcon(){
      var refreshicon = new Icon(Icons.refresh);
      return refreshicon;
    }

}

现在，当我在refreshHomePage函数中使用setState时，它不起作用，并且警告“未引用声明'setState'。 请尝试删除显示的'setState'.dart（unused_element）“声明。请提出任何建议。 任何帮助表示赞赏。

3 个答案:

答案 0 :(得分：0)

将函数传递给另一个小部件时可以使用回调函数

Widget refreshButton(VoidCallBack onPress){
  Widget refreshicon = refreshIcon();
  Widget refreshbutton = new IconButton(icon: refreshicon, onPressed: onPress,);
  return refreshbutton;
}

您的代码看起来过于工程化，也许简化的事情使其易于理解。并始终将类型声明为一个好习惯。

答案 1 :(得分：0)

它将像这样工作，也许是我，但是很难按照自己的方式来遵循代码。

setState必须在statefullWidget内，或者从那里作为参数发送。

import 'package:flutter/material.dart';

main() => runApp(new DarkX());

class DarkX extends StatefulWidget {
  @override
  _DarkXState createState() => _DarkXState();
}

class _DarkXState extends State<DarkX> {
  var _isLoading = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: createHomePageScaffold(), debugShowCheckedModeBanner: false);
  }

  //Scaffold For Home Page
  createHomePageScaffold() {
    var homeAppbar = homeAppBar();
    var homebody = homeBody();
    var scaffold = new Scaffold(
      appBar: homeAppbar,
      body: homebody,
    );
    return scaffold;
  }

  //AppBar For Home Page
  homeAppBar() {
    var text = createText('Welcome');
    var refreshbutton = refreshButton(refreshHomePage);
    var appBar = new AppBar(
      title: text,
      actions: <Widget>[refreshbutton],
    );
    return appBar;
  }

  //Body For Home Page
  homeBody() {
    var loadingState = _isLoading
        ? CircularProgressIndicator()
        : createText('Finished Loading');
    return new Center(child: loadingState);
  }

  refreshButton(Function onPress) {
    var refreshicon = refreshIcon();
    var refreshbutton = new IconButton(
      icon: refreshicon,
      onPressed: () {
        onPress();
      },
    );
    return refreshbutton;
  }

  //homepage Refresh Action
  refreshHomePage() {
    setState(() {
      _isLoading = false;
    });
  }

  //Create Text
  createText(String text) {
    var newText = new Text(text);
    return newText;
  }

  //Refresh Icon
  refreshIcon() {
    var refreshicon = new Icon(Icons.refresh);
    return refreshicon;
  }
}

答案 2 :(得分：0)

您应该记住的第一件事是setState()方法是State<E extends StatefulWidget>类的方法。根据您的源代码，您正在调用setState()类的DarkXAppHomePage方法。 DarkXAppHomePage类不是State类和State的子类。因此，您的代码无法正常工作。您的setState()方法也实现了错误。您的解决方案，我建议您执行2个步骤。

第一步，您应该再次仔细阅读this docs。

第二步，我将帮助您逐步修改源代码。

第1步：您的原始来源。

class DarkXAppHomePage {
  var _isLoading = true;

  createHomePage(){
    var homePageScaffold = createHomePageScaffold();
    return MaterialApp(home: homePageScaffold, debugShowCheckedModeBanner: false);
  }


  //Scaffold For Home Page
  createHomePageScaffold(){
    var homeAppbar = homeAppBar();
    var homebody = homeBody();
    var scaffold = new Scaffold(appBar: homeAppbar, body: homebody,);
    return scaffold;
  }

  //AppBar For Home Page
  homeAppBar(){
    var text = createText('Welcome');
    var refreshbutton = refreshButton(refreshHomePage);
    var appBar = new AppBar(title: text,actions: <Widget>[refreshbutton],);
    return appBar;
  }

  //Body For Home Page
  homeBody(){
    var loadingState = _isLoading ? CircularProgressIndicator() : createText('Finished Loading');
    return new Center(child: loadingState);
  }

  refreshButton(Function onPress){
    var refreshicon = refreshIcon();
    var refreshbutton = new IconButton(icon: refreshicon, onPressed: (){
      onPress();
    },);
    return refreshbutton;
  }

  //homepage Refresh Action
  refreshHomePage(){
    setState(){
      _isLoading = false;
    } // ★ => Look at this, wrong implement. You have to put a method as `setState()` parameter instead of write a new `setState()` method liked that.
  }

  //Create Text
  createText( String text ){
    var newText = new Text(text);
    return newText;
  }

  //Refresh Icon
  refreshIcon(){
    var refreshicon = new Icon(Icons.refresh);
    return refreshicon;
  }

}

第2步：将其缩短以使其易于阅读。 （也许不容易理解。但是我们会尽快对其进行更新。）

class DarkXAppHomePage {  
  var _isLoading = true;

  createHomePage() => MaterialApp(home: createHomePageScaffold(), debugShowCheckedModeBanner: false);

  //Scaffold For Home Page
  createHomePageScaffold() => Scaffold(appBar: homeAppBar(), body: homeBody());

  //AppBar For Home Page
  homeAppBar() => AppBar(title: createText('Welcome'), actions: <Widget>[refreshButton(refreshHomePage)]);

  //Body For Home Page
  homeBody() => Center(child: _isLoading ? CircularProgressIndicator() : createText('Finished Loading'));

  refreshButton(Function onPress) => IconButton(icon: refreshIcon(), onPressed: () => onPress());

  //homepage Refresh Action
  refreshHomePage() => setState(() => _isLoading = false); // ★ => `() => _isLoading = false` is the short way represent an anonymous method. You put this anonymous method as a parameter of `setState()`

  //Create Text
  createText(String text) => Text(text);

  //Refresh Icon
  refreshIcon() => Icon(Icons.refresh);

}

第3步：现在，休息一下。您必须创建一个包含StatefulWidget属性的_isLoading。

class DarkXAppHomePage extends StatefulWidget {
  var _isLoading = true;

  @override
  _DarkXAppHomePageState createState() => _DarkXAppHomePageState();
}

class _DarkXAppHomePageState extends State<DarkXAppHomePage> {
  //homepage Refresh Action
  refreshHomePage() => setState(() => widget._isLoading = false); // ★ => Just look at this. It have a obscure technique here. If you have right impelement which detail here (https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html), Flutter framework auto put the instance of your `DarkXAppHomePage` inside `_DarkXAppHomePageState` with the named `widget`. As you see, the `_DarkXAppHomePageState` force state of `State<DarkXAppHomePage>` and `DarkXAppHomePage` have `createState()` method which provided `_DarkXAppHomePageState`.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //Scaffold For Home Page
      home: Scaffold(
        //AppBar For Home Page
        appBar: AppBar(
          //Create Text
          title: Text('Welcome'),
          actions: <Widget>[
            IconButton(
              //Refresh Icon
              icon: Icon(Icons.refresh),
              onPressed: () => refreshHomePage,
            ),
          ],
        ),
        body: Center(
          child: widget._isLoading ? CircularProgressIndicator() : Text('Finished Loading'),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

步骤4 ：将您的DarkXAppHomePage连接到主电源。

main() => runApp(DarkX());

class DarkX extends StatelessWidget {
  @override
  Widget build(BuildContext context) => DarkXAppHomePage();
}

我在没有IDE的情况下编写了此代码，因此，如果我遇到任何拼写错误，请随时帮助我进行修复。

相关问题
最新问题