像Excel单元格一样的小工具（可以输入公式，显示的文本是公式的结果）？

Question

我想创建一个小部件（文本字段或其他），点击它我可以输入一些文本，但显示的值是其他东西。与具有公式的Excel单元格类似：您可以编辑公式，但是您可以看到结果。

那可能吗 ？

谢谢。

Answer 1

绝对有可能。在下面的示例中，TextField当前在编辑完成时将某些文本更改为大写。点击TextField后，它返回显示原始输入。您应该能够根据需要进行修改。

import 'package:flutter/material.dart';

class ExcelFormulaField extends StatefulWidget {
  @override
  _ExcelFormulaFieldState createState() => _ExcelFormulaFieldState();
}

class _ExcelFormulaFieldState extends State<ExcelFormulaField> {
  String input;
  String output;
  bool isInputActive;
  TextEditingController controller;

  void updateInput(text) => setState(() {
        input = text;
      });

  void setInputActive() => setState(() {
        if (isInputActive != true) {
          isInputActive = true;

          resetController();

          print("Active");
          print("Input: $input, Output: $output");
        }
      });

  void setInputInactive() => setState(() {
        isInputActive = false;

        // TODO replace with the logic you want
        output = input.toUpperCase();
        controller = TextEditingController(text: output);

        print("InActive");
        print("Input: $input, Output: $output");
      });

  void resetController() {
    controller = TextEditingController(text: input);
    controller.addListener(() => updateInput(controller.text));
  }

  @override
  void initState() {
    super.initState();
    isInputActive = false;
    resetController();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setInputInactive();
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: "input",
                  labelText: "Hit enter on keyboard to see change"),
              onTap: () {
                setInputActive();
              },
              onEditingComplete: () {
                setInputInactive();
              },
              controller: controller,
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }
}

希望能帮助到你 ：-）