Question

有人在按下按钮后知道如何使文本可编辑吗？我希望仅当用户单击按钮时才可以对其进行编辑。以下是我需要的结果。

如果要编辑“休假”文本，则需要单击编辑按钮。

Answer 1

我认为这应该做您想要的。

TextEditingController _controller =
      TextEditingController(text: "Festive Leave");
  bool _isEnable = false;
//These are initialize at the top


Row(
            children: <Widget>[
              Container(
                width: 100,
                child: TextField(
                  controller: _controller,
                  enabled: _isEnable,
                ),
              ),
              IconButton(
                  icon: Icon(Icons.edit),
                  onPressed: () {
                    setState(() {
                      _isEnable = true;
                    });
                  })
            ],
          ),

Answer 2

我认为这对您有帮助

class SampleDemo extends StatefulWidget {
  @override
  _SampleDemoState createState() => _SampleDemoState();
}

class _SampleDemoState extends State<SampleDemo> {
  String title = "MyTitle";
  bool isEditable=false;

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Expanded(
          child: !isEditable
              ? Text(title)
              : TextFormField(
                  initialValue: title,
                  textInputAction: TextInputAction.done,
                  onFieldSubmitted: (value) {
                    setState(() => {isEditable = false, title = value});
                  })),
      IconButton(
        icon: Icon(Icons.edit),
        onPressed: () {
          setState(() => {
                isEditable = true,
              });
        },
      )
    ]);
  }
}

Answer 3

Row(
            children: <Widget>[
              Container(
                width: 100,
                child: TextField(
              decoration: InputDecoration(
                hintText: "Festive Leave",
                hintStyle: TextStyle(color: Colors.black),
              ),
              enabled: _isEnable,
            ),
              ),
              IconButton(
                  icon: Icon(Icons.edit),
                  onPressed: () {
                    setState(() {
                      _isEnable = true;
                    });
                  })
            ],
          ),

您选择的这一文本将在用户开始输入时立即消失

按下按钮后使文本可编辑

3 个答案: