我是 Flutter 的新手，试图在 btn click 上添加一个单词（该单词来自文本字段）。然后我希望列表显示在页面上

Posted 2023-02-23

【中文标题】我是 Flutter 的新手，试图在 btn click 上添加一个单词（该单词来自文本字段）。然后我希望列表显示在页面上

【英文标题】：I'm new to flutter, trying to add a word to a list on btn click (the word comes from a text field). I then want the list to show on the page

【发布时间】：2021-10-26 19:11:58

【问题描述】：

Here's the image

如果你看图片，右下角有一个文本字段和一个添加按钮。我希望用户输入单词并使用该按钮将其添加到列表中。

为了访问文本字段中的值，我使用了 (TextEditingController)

请在下面找到小部件的代码。 仅供参考：当在其上一页上按下图标时会调用此小部件

最终单词列表 = []; // 我要渲染的列表

Widget _doSomething() 
    setState(() async => wordList.add(await Navigator.push(context,
            MaterialPageRoute(builder: (BuildContext context) 
          return Scaffold(
            appBar: AppBar(
              title: Text('Enter Something..'),
            ),
            body: TextField(
              controller: myController,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Add word',
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () 
                Navigator.pop(context, myController.text);
              ,
              tooltip: "Toggle input value",
              child: const Icon(Icons.add),
            ),
          );
        ))));
    return _getList();
  

上面，我返回 _getList()。 _getList() 是另一个小部件，其中我有列表视图代码，以便在同一页面中显示单词列表值。 （代码如下）

 Widget _getList() 
    return Scaffold(
      body: ListView.builder(
        itemCount: wordList.length,
        itemBuilder: (BuildContext context, int index) 
          return ListTile(
            title: Text(wordList[index]),
          );
        ,
      ),
    );
  

如果有不清楚的地方，我深表歉意。请随时向我寻求更多解释。谢谢你的帮助。

【参考方案1】：

首先你在创建类的实例时不需要使用 new。所以new Text() 会变成Text()。

其次，如果您使用导航使用.of() 构造函数，它将改变您当前的屏幕。您可以使用Navigator.push() 方法。该函数将是async，并将返回void。您可以在主小部件中重新运行小部件。

第三，为什么要在函数中返回整个 MaterialApp。它应该在您的main.dart 中。

void _doSomething() async 
    wordList.add(await  Navigator.
        .push(context,MaterialPageRoute<void>(builder: (BuildContext context) 
      return Scaffold(
        appBar: AppBar(
          title: Text('Enter Something..'),
        ),
        body: TextField(
          controller: myController,
          decoration: InputDecoration(
              border: OutlineInputBorder(), hintText: 'Add word',),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: ()  
          Navigator.pop(context, myController.text);

        ,
          tooltip: "Toggle input value",
          child: const Icon(Icons.add),
        ),
      );
    )));
   setState(()=> wordList = wordList);
  

获取列表：

Widget _getList() 
    return Scaffold(
        body: ListView.builder(
          itemCount: wordList.length,
          itemBuilder: (BuildContext context, int index) 
            return ListTile(
              title: Text(wordList[index]),
            );
          ,
        ),
      );
  

【讨论】：

有几件事，我在 setState 中添加了另一个异步，因为它给了我这个错误“等待表达式只能在异步函数中使用”。另外，（Navigator..push（context），.push 部分似乎有点偏离，因为它给出了这个错误（getter '' 没有为类型'Navigator' 定义。尝试导入定义''的库)

我对上面的小部件代码进行了编辑，但是，当我单击添加图标时，屏幕退出并转到上一页。我不确定这是否是因为 .push 功能

我已更改代码。我忘了你不能在 setState 中使用异步返回。您现在可以查看代码了。

对于这一行 (wordList.add(await Navigator..push(context,MaterialPageRoute(builder: (BuildContext context)) 是 Navigator..push 一个错字还是你只是说 Navigator。推？