代码之家 › 专栏 › 技术社区 › Tindona

同时更改关于TextField的文本

dart flutter

Tindona · 技术社区 · 2 年前

我有一个名为的自定义文本小部件 Dynamic_Game_Preview ,还有一个TextField。我想要 动态名称预览 要随TextField的更改而更改。我用过 onChanged 方法,但所有字母都单独显示在 动态名称预览 。我如何处理这些更改以应用于 动态名称预览 同时更改TextField? 这是我的代码:

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:pet_store/widgets/dynamic_game_preview.dart';
import 'main.dart';

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

  @override
  State<Dynamic_Game> createState() => _Dynamic_GameState();
}

class _Dynamic_GameState extends State<Dynamic_Game> {
  TextEditingController nameController = TextEditingController();
  List<String> names = [];
  bool isLoading = false;
  List<Dynamic_Game_Preview> dynamicList = [];
  void initState() {
    super.initState();
    dynamicList = [];
    names = [];
  }

  void addNames() {
      if (names.length == 1) {
        names = [];
      }
      names.add(nameController.text);
      nameController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        title: const Text('Dynamic Game'),
        leading: GestureDetector(
          child: const Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onTap: () {
            // Navigator.pop(context);
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(
                builder: (BuildContext context) => const HomePage(),
              ),
              (route) => false,
            );
          },
        ),
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Center(
          child: Column(
            children: <Widget>[
              SizedBox(height: 20),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 30),
                child: TextField(
                  controller: nameController,
                  onChanged: (value) {
                    setState(() {
                      addNames();
                    });
                  },
                  decoration: const InputDecoration(
                    labelText: 'Enter a Pet Name',
                  ),
                ),
              ),
              SizedBox(height: 10),
              Flexible(
                fit: FlexFit.loose,
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: names.length,
                  itemBuilder: (_, index) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 5.0, vertical: 3.0),
                      child: Dynamic_Game_Preview(nameController.text),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

1 回复 | 直到 2 年前

Dabbel 2 年前

问题

您的代码清除 nameController :

void addNames() {
  ...  
  nameController.clear();
}

然后代码正在尝试显示 nameController.text ,刚刚被清除:

Dynamic_Game_Preview(nameController.text)

解决方案

以下内容应该有效:

itemBuilder: (_, index) {
  return Padding(
    padding: const EdgeInsets.symmetric(
    horizontal: 5.0, vertical: 3.0),
    child: Dynamic_Game_Preview(names[index]),
  );
},

最后不能不提

这可能不需要:

onTap: () {
  FocusScope.of(context).requestFocus(FocusNode());
},