Flutter/Dart - 编辑后在构建的页面视图上自动更新标题？答案

【问题标题】：Flutter/Dart - Update Title Automatically on Built Page Views after edit?Flutter/Dart - 编辑后在构建的页面视图上自动更新标题？
【发布时间】：2020-08-12 12:26:47
【问题描述】：

我有一个返回页面的PageView.builder。每个都有一个标题和一个标签。我还有一个EditPage，它允许用户编辑标题。已编辑的标题通过 PHP 在 MySQL 数据库上进行更新。
我可以让单个页面自动更新为新标题吗？还是每次更新标题时都必须完全重建 PageView？

这是PageView.builder 代码；

class StageBuilder extends StatelessWidget {
  final List<SpeakContent> speakcrafts;

  StageBuilder(this.speakcrafts);

  @override
  Widget build(context) {
    return PageView.builder(
      itemCount: speakcrafts.length,
      itemBuilder: (context, int currentIndex) {
        return createViewItem(speakcrafts[currentIndex], context);
      },
    );
  }

  Widget createViewItem(SpeakContent speakcraft, BuildContext context) {

    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              speakcraft.title,
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              speakcraft.tagname,
            ),
          ],
        ),
      ],
    );
  }
}

这是发布到 PHP/MYSQL 数据库的代码；

Future<String> titleUpdate({String opid, String title}) async {
  String upDateUrl;
  upDateUrl = "http://example.com?title=" + title;

  final response = await get(upDateUrl);

  if (response.statusCode == 200) {
    print(response.body);
    return response.body;
  } else
    throw Exception('We were not able to successfully update the title');
}

【问题讨论】：

使用键列表，为每个页面分配一个键，并在编辑后在所需页面上调用 setState。
是否有机会提供一些示例代码？
用Form(key: formKey, child:myWidget()),这样的形式包装你的页面，并将formKey定义为GlobalKey<FormState> formKey = new GlobalKey();
那么在上面的代码中我会以那种形式包装 Column 吗？
RE：“cmets 不接受换行符”如果你把代码放在“回答”按钮中，我可以接受，这样你就可以获得积分。

标签： flutter dart flutter-provider flutter-pageview

【解决方案1】：

ListView 的语法是： List test = new List<GlobalKey<FormState>>(speakCreafts.length);.

你的 createViewItem 看起来像：

  return Form(
    key: test[currentIndex], 
    child: createViewItem(speakcrafts[currentIndex], context),
    );      
  },

是的，items 是您拥有的 createViewItems 的数量。

要重建您的页面，您必须调用相同的 setState 并参考如下：

test[index].currentState.setState(() {});

感谢@Meggy 的积分！呵呵

【讨论】：

请确保为索引提供适当的值。最好在可以使用 currentIndex 本身的 ListView 中调用它。也可以在外面打电话，只要确保不要混淆索引。
如何将 test[currentIndex] 传递给“EditPage”，以便在我的服务器成功响应 200 时使用它调用 setState 并重建页面？
等等等等。不要告诉我你没有使用futurebuilder？它现在才击中我，因为我在想你需要啊，该死的。只需查找 FutureBuilder 和 StreamBuilder
不，你不能这样传递 currentIndex 。我在想你叫你的未来在哪里，因为你问了这个问题，我从来没有想过 FutureBuilder 正是你所需要的。它在收到未来后重建页面。对不起.....
所以你的意思是“createViewItem”应该被包装在未来，并将标题和标记名作为snapshot.data？

【解决方案2】：

虽然不是我想要的，但最终我还是决定让用户通过 appbar 回到更新后的页面；我发送的参数只用一个编辑过的页面重建了一个新页面。

 appBar: AppBar(
    title: Text(
      "Back to edited page",
      style: TextStyle(
        fontSize: 14,
        color: Colors.blueGrey,
      ),
    ),

    leading: new IconButton(
      icon: new Icon(
        Icons.arrow_back,
        color: Colors.white,
      ),
      onPressed: () {
        Navigator.push(
            context,
            PageTransition(
              type: PageTransitionType.downToUp,
              child: HomePage(stagetype: 'edit', currentaudioid: widget.opid,),
            ));
      },
    ),
   ),

【讨论】：