像Excel单元格一样的小部件（可以输入公式，显示的文本是公式的结果）？ [英] Widget that acts like an Excel cell (can input a formula, displayed text is result of formula)?

问题描述

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

I would like to create a widget (text field or other) where on clicking on it I can enter some text, but the displayed value is something else. Similar to an Excel cell with a formula: you can edit the formula, but you see the result.

可能吗？

谢谢。

推荐答案

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

Definitely possible. In the example below a TextField currently changes some text to uppercase when the editing is completed. When the TextField is tapped it returns to showing the original input. You should be able to modify this to what you need.

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();
  }
}

希望它会有所帮助：-）

Hope it helps :-)

这篇关于像Excel单元格一样的小部件（可以输入公式，显示的文本是公式的结果）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！