如何在顫動中訪問多個相同有狀態小部件的TextEditingController？

我正在制作一個應用程式，用戶可以在其中在家庭有狀態小部件內的串列視圖中添加多個有狀態小部件。示例：成分串列。每個成分小部件都有一個 TextFormField。用戶可以根據需要添加任意數量的成分，最終輸入的資料將使用來自 home 有狀態小部件的 POST 請求進行更新。

問題：我如何從主狀態訪問每個添加的成分小部件的 TextFormField 控制器。這也是最好的方法還是有更好的方法？

class home extends StatefulWidget {
  const home({Key? key}) : super(key: key);

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

class _homeState extends State<home> {
  List<Widget> listRecipe = [];

  addIngredient(){
    listRecipe.add(new Ingredient());
  }

  Future<http.Response> postData(){
    return http.post(
      Uri.parse(recipeData),
      headers: <String, String>{
        'Authorization':'token $token',
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        "name":"something",
        "ingredients":'{"ingredient1": "value", "ingredient2": "value", ...... }'
      }),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
          child: Wrap(
            children:[ ListView(
              children:listRecipe,
            ),
            ],
          ),
        ),
    ]  ),
      bottomNavigationBar: Row(
          children:
      [FloatingActionButton(
        onPressed: addIngredient,
      ),
        FloatingActionButton(onPressed: postData)
    ]));
  }
}



class Ingredient extends StatefulWidget {
  const Ingredient({Key? key}) : super(key: key);

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

class _IngredientState extends State<Ingredient> {
  final _typeController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: EdgeInsets.only(left: 22, top: 20, right: 15),
        child: Column(
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              child: Padding(
                padding: const EdgeInsets.only(left: 5.0),
                child: Text(
                  "Process",
                  style: TextStyle(
                    fontFamily: 'Nunito',
                    color: Colors.grey.shade500,
                    fontSize: 12,
                  ),
                  textAlign: TextAlign.left,
                ),
              ),
            ),
            Container(
              height: 45,
              child: TextFormField(
                keyboardType: TextInputType.text,
                maxLines: null,
                controller: _typeController,
                style: TextStyle(fontSize: 15, fontFamily: 'Nunito'),
                decoration: InputDecoration(
                  hintText: 'Enter Process',
                  hintStyle: TextStyle(color: Colors.grey.shade400),
                  contentPadding: EdgeInsets.only(left: 5),
                  enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.green)),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.green, width: 2),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );;
  }
}

uj5u.com熱心網友回復：

tl：博士

• 將 final String 屬性添加到 StatefulWidget
• 在 initState 中將屬性值分配給 TextEditingController： textEditingController.text = widget.stringValue
• 覆寫 didUpdateWidget 并設定 TextEditingControllerValue textEditingController.text = widget.stringValue

我建議為您的成分添加一個模型，例如：

class Ingredient {
  String? data;

  Ingredient({this.data});
}

將成分小部件重命名為 eg IngredientWidget。你listReceipe應該留下的型別List<Ingredient>：

  List<Ingredient> listRecipe = [];

  addIngredient() {
    setState(() {
      listRecipe.add(Ingredient());
    });
  }

更改 Home Widget 的正文：

 body: Container(
              child: ListView.builder(
                  itemCount: listRecipe.length,
                  itemBuilder: (context, index) =>
                      IngredientWidget(listRecipe[index]))),

現在像這樣更改您的 IngredientWidget：

class IngredientWidget extends StatefulWidget {
  const IngredientWidget(this.ingredient, {Key? key}) : super(key: key);

  final Ingredient ingredient;

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

class _IngredientWidgetState extends State<IngredientWidget> {
  final _typeController = TextEditingController();

  @override
  void didUpdateWidget(covariant IngredientWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    _typeController.text = widget.ingredient.data ?? '';
  }

  @override
  void initState() {
    super.initState();
    _typeController.text = widget.ingredient.data ?? '';
  }

  @override
  Widget build(BuildContext context) {
    // stays the same
  }
}

您可以將值傳遞給您的成分小部件：

Ingredient(data: 'Hello World')

所以你也可以更新 listReceipe 中的成分

  setState(() {
    listRecipe[index] = Ingredient(data: anyStringValue);
  });

并且您的串列應相應更新。

標籤：

上一篇：如何使用<ahref="">標簽提交POST？

下一篇：當發送的字串長度為18個字符時，快遞api不執行