后缀文本表单域（Flutter）

Question

我想按照第一张图片中的价格文本对齐，我尝试按照第二张图片中的方式对齐，但我做不到。

我想做：

问题：

这是我为尝试构建设计而编写的代码。

TextFormField(
  controller: startController,
  keyboardType: TextInputType.number,
  textAlign: TextAlign.end,
  decoration: const InputDecoration().copyWith(
      border: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
  enabledBorder: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
  disabledBorder: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
  suffix: Text('JOD', style: 
      Theme.of(context).textTheme.headline6!.copyWith(fontSize: 
      Sizes.textSize_22)),
  ),
  style: Theme.of(context).textTheme.headline6!.copyWith(fontSize: 
      Sizes.textSize_34),
)

Answer 1

您为此制作了自定义小部件。我做了 StatefulWidget 我希望它对你有意义。

FocusNode 用于处理焦点变化并为文本下方的线条设置动画。
MouseRagion用于处理悬停事件。
IntrinsicWidth 用于使 TextFormInput 在键入时可扩展。

这是代码：

class TextCustom extends StatefulWidget {
  const TextCustom({Key? key, this.textController, this.suffix})
      : super(key: key);

  final TextEditingController? textController;
  final String? suffix;
  @override
  State<TextCustom> createState() => _TextCustomState();
}

class _TextCustomState extends State<TextCustom> {
  bool _isHovering = false;
  bool _isFocased = false;

  FocusNode textFocus = FocusNode();

  @override
  void initState() {
    textFocus.addListener(() {
      setState(() {
        _isFocased = textFocus.hasFocus;
      });
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: MouseRegion(
        onEnter: (event) {
          setState(() {
            _isHovering = true;
          });
        },
        onExit: (event) {
          setState(() {
            _isHovering = false;
          });
        },
        child: GestureDetector(
          onTap: () {
            textFocus.requestFocus();
          },
          child: InputDecorator(
            expands: false,
            isFocused: _isFocased,
            isHovering: _isHovering,
            decoration: const InputDecoration(),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.baseline,
              textBaseline: TextBaseline.alphabetic,
              children: [
                IntrinsicWidth(
                  child: TextFormField(
                    focusNode: textFocus,
                    controller: widget.textController,
                    decoration: const InputDecoration(
                      constraints: BoxConstraints(minWidth: 20),
                      isCollapsed: true,
                      border: UnderlineInputBorder(borderSide: BorderSide.none),
                    ),
                    style: Theme.of(context)
                        .textTheme
                        .headline6!
                        .copyWith(fontSize: 34),
                  ),
                ),
                const SizedBox(width: 8),
                (widget.suffix != null)
                    ? Text(
                        'JOD',
                        style: Theme.of(context)
                            .textTheme
                            .headline6!
                            .copyWith(fontSize: 22),
                      )
                    : Container(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

后缀文本表单域（Flutter）

Suffix text form field (Flutter)

flutter

flutter-layout

flutter-animation