Flutter：如何让 suffixIcon 出现在 InputDecoration 中的输入之后？

Question

我想显示几个输入，并在其中插入一些文本，以获得三次方程的系数，如下所示：

@override
Widget build(BuildContext context) {
return RichText(
  text: TextSpan(
    children: <InlineSpan>[
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: const IntrinsicWidth(
                child: TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                        isDense: true, contentPadding: EdgeInsets.all(0))),
              ))),
      const WidgetSpan(child: Text("x^3 + ")),
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: const IntrinsicWidth(
                child: TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                        isDense: true, contentPadding: EdgeInsets.all(0))),
              ))),
      const WidgetSpan(child: Text("x^2 + ")),
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: const IntrinsicWidth(
                child: TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                        isDense: true, contentPadding: EdgeInsets.all(0))),
              ))),
      const WidgetSpan(child: Text("x + ")),
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: IntrinsicWidth(
                child: TextField(
                    controller: controller,
                    maxLines: null,
                    decoration: InputDecoration(
                      suffixIcon: IconButton(
                          onPressed: click,
                          icon: const Icon(Icons.done_outline_rounded),
                          splashColor: Colors.green,
                          tooltip: "Save equation"),
                    )),
              ))),
    ],
  ),
);
}

我不确定这是否是这样做的方法。无论如何，我还需要在此输入的末尾添加一个按钮。目前看起来是这样的：

我想知道是否有办法让这个图标位于下划线之后而不是其上方？预先感谢。

Answer 1

您可以使用专栏

Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  mainAxisSize: MainAxisSize.min,
  children: [
    RichText(
      text: TextSpan(
        children: <InlineSpan>[
         ....
          WidgetSpan(
            child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: IntrinsicWidth(
                child: TextField(
                  maxLines: null,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
    IconButton( //play with padding if needed
        color: Colors.red,
        onPressed: () {},
        icon: const Icon(Icons.done_outline_rounded),
        splashColor: Colors.green,
        tooltip: "Save equation"),
  ],
),