当我在颤动中按下按钮时，如何将 Card 小部件替换为 TextField？

如何解决当我在颤动中按下按钮时，如何将 Card 小部件替换为 TextField？

Card(
  child: ListTile(
    leading: Icon(
      Icons.arrow_back_ios_sharp,color: Colors.blue,),title: Text(
      'Name',style: TextStyle(fontSize: 20),subtitle: Text('Edit your name'),

解决方法

这是使用 _editing 状态变量在 Card() 和 TextField() 小部件之间切换的解决方案的开始。

按 ENTER 即可完成编辑。

您可能想要：

• 添加 OK 按钮
• 同时接受 TAB 键完成编辑并切换到下一个字段
• 处理对另一个 Card() 的点击并停止编辑当前的

完整源代码

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,title: 'Flutter Demo',home: HomePage(),),);
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          EditableCard(
            labelText: 'Name',hintText: 'Enter your name',onChanged: (value) => print('New name: $value'),EditableCard(
            labelText: 'ID',hintText: 'Enter your number ID',onChanged: (value) => print('New ID: $value'),EditableCard(
            labelText: 'Phone',hintText: 'Enter your phone number',onChanged: (value) => print('New phone: $value'),EditableCard(
            labelText: 'School Address',hintText: 'Enter your school address',onChanged: (value) => print('New school address: $value'),EditableCard(
            labelText: 'Home Address',hintText: 'Enter your home address',onChanged: (value) => print('New home address: $value'),],);
  }
}

class EditableCard extends HookWidget {
  final String initialValue;
  final String labelText;
  final String hintText;
  final ValueChanged<String> onChanged;

  const EditableCard({
    Key key,this.initialValue,this.labelText,this.hintText,this.onChanged,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _editing = useState(false);
    final _controller = useTextEditingController(text: initialValue ?? '');
    return _editing.value
        ? TextField(
            controller: _controller,decoration: InputDecoration(
              labelText: labelText,hintText: hintText,autofocus: true,onEditingComplete: () {
              _editing.value = false;
              onChanged?.call(_controller.text);
            },)
        : Card(
            child: ListTile(
              onTap: () => _editing.value = true,leading: Icon(
                Icons.arrow_back_ios_sharp,color: Colors.blue,title: Text(
                labelText,style: TextStyle(fontSize: 20),subtitle: Text(
                  _controller.text.isNotEmpty ? _controller.text : hintText),);
  }
}

注意：我使用了 Flutter Hooks 而不是 StatefulWidget。

,

看看你的截图，我猜你想使用一个 texfield 来更新列表中的值。

我要做的是使用带有文本字段的 AlertDialog，然后从文本字段中检索值并将其用于列表磁贴。

AlertDialog( 
    title: Text('TextField in Dialog'),content: TextField( 
      onChanged: (value) {
      //save the _textFieldController.text to a variable
   },controller: _textFieldController,decoration: InputDecoration(hintText: "Text Field in Dialog"),actions: <Widget>[
         FlatButton(
           color: Colors.green,textColor: Colors.white,child: Text('OK'),onPressed: () {
             
               //save the _textFieldController.text to a variable
               Navigator.pop(context);
             
           },

请注意，您必须初始化 _textFiledController。您还必须初始化一个变量以保存文本输入。