Flutter：使用不同的数据和后退按钮刷新同一屏幕

Question

几天前我最近开始探索 Flutter。我创建了一个包含一些行的列表。有些行有子数据。

现在屏幕顶部有自定义按钮。

final topAppBar = AppBar(
  elevation: 0.1,
  backgroundColor: Color.fromRGBO(0, 113, 188, 1.0),
  title: Text("RESOURCES", style: TextStyle(
    color: Colors.white,
    fontFamily: 'Raleway-ExtraBold',
    fontWeight: FontWeight.w900,
    fontSize: 20.0,
  ),),
  leading: IconButton(
    icon: new Image.asset('assets/images/settings.png'),
  ),
);

当用户点击这些行时，我只想用子数据刷新列表，并通过更新顶部的“后退按钮”来推送效果。

下面的代码能够通过推送效果在屏幕上导航，但是我们如何使用数据和后退按钮来维护应用程序的状态。

ListTile makeResourcesListTile(Resources resources) => ListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
      title: Text(
        resources.title,
        style: TextStyle(
          color: Colors.white,
          fontSize: 14.0,
          fontWeight: FontWeight.bold,
          fontFamily: "Raleway-Bold",
        ),
      ),
      trailing:
          Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
      onTap: () {

            Navigator.pushNamed(context, ‘/listScreen’);



      },
    );

求推荐。提前谢谢你

Answer 1

我想你应该看看：

这是您要找的吗？

LE:

如果您只想更改列表的数据源并添加后退按钮，请尝试以下代码：

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  bool showDetails = false;
  String title = 'Resources';

  List<Resource> resources = [
    new Resource('1', 'one', null),
    new Resource('2', 'two', [new Resource('Child', 'Child', null)]),
    new Resource('3', 'three', null),
    new Resource('4', 'four', [
      new Resource('Child', 'Child', null),
      new Resource('Child', 'Child', null)
    ]),
    new Resource('5', 'five', null)
  ];
  List<Resource> currentSource;

  @override
  Widget build(BuildContext context) {
    if (!showDetails) {
      currentSource = resources;
    }

    Widget showResourcesList() {
      return new ListView.builder(
          itemCount: currentSource.length,
          itemBuilder: (BuildContext context, int index) {
            return new ListTile(
                title: Center(
                  child: Text(currentSource[index].name),
                ),
                onTap: () {
                  setState(() {
                    if (currentSource[index].children != null) {
                      title = 'Children for ' + currentSource[index].name;
                      currentSource = resources[index].children;
                      showDetails = true;
                    }
                  });
                });
          });
    }

    Widget showBackButton() {
      return IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          setState(() {
            showDetails = false;
            currentSource = resources;
            title = 'Resources';
          });
        },
      );
    }

    Widget showSettingsButton() {
      return IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {},
      );
    }

    return Scaffold(
      appBar: AppBar(
        elevation: 0.1,
        backgroundColor: Color.fromRGBO(0, 113, 188, 1.0),
        title: Text(
          title,
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w900,
            fontSize: 20.0,
          ),
        ),
        leading: showDetails ? showBackButton() : showSettingsButton(),
      ),
      body: showResourcesList(),
    );
  }
}

class Resource {
  String name;
  String description;

  List<Resource> children;

  Resource(this.name, this.description, this.children);
}

我使用了代表应用程序状态的 bool 变量 (showDetails)，并且在点击 listTile 时更改了数据源。

Flutter：使用不同的数据和后退按钮刷新同一屏幕

Flutter : Refresh same screen with different data and back button

dart

flutter

flutter-sliver

flutter-layout

flutter-animation