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

Posted 2023-03-28

【中文标题】当我在颤动中按下按钮时，如何将 Card 小部件替换为 TextField？ [关闭]

【英文标题】：How i can replace Card widget to TextField when i press on button in flutter? [closed]

【发布时间】：2021-05-29 07:11:38

【问题描述】：

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'),
  ),
),

【参考方案1】：

看你的截图，我猜你想使用 texfield 来更新 listitle 中的值。

我要做的是使用带有文本字段的 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。您还必须初始化一个变量来保存文本输入。

【参考方案2】：

这是使用_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。

【讨论】：

Thaaaaaaank yoooouuuu