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

Posted 2023-02-23

【中文标题】Flutter：使用不同的数据和返回按钮刷新同一屏幕

【英文标题】：Flutter : Refresh same screen with different data and back button

【发布时间】：2019-07-25 11:26:43

【问题描述】：

几天前我最近开始探索 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’);



      ,
    );

请提出建议。提前谢谢你

【参考方案1】：

我想你应该看看：Passing data between screens in Flutter

这是你要找的吗？

乐：

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

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 时更改数据源。

【讨论】：

我想使用同一个屏幕。让我改写一下。假设我在应用程序中只有一个具有列表的屏幕。现在，当我单击该行（如果它有子行）时，它应该只导航到同一屏幕并更改顶部按钮和导航数据。

您是想要导航（使用 Navigator.push）还是只是更改列表的数据源并在左上角添加一个后退按钮？ （如果这是你要找的，我更新了我的答案）

是的，你的回答我超级酷。它工作得很好。非常感谢您的支持。赞赏。