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

Question

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

Answer 1

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

Answer 2

看你的屏幕截图，我猜你想使用 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。您还必须初始化一个变量来保存输入的文本。

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

How i can replace Card widget to TextField when i press on button in flutter?

widget

uitextfield

flutter

flutter-layout

card

完整源代码