控制iOS上只读TextFormField浮动标签的文本溢出?

gtlvzcf8  于 11个月前  发布在  iOS
关注(0)|答案(2)|浏览(97)

我有一个只读的TextFormFieldwidget如下所示:

TextFormField(
      /// field must neither be focusable, nor must value be editable by input
      canRequestFocus: false,
      readOnly: true,

      controller: _textEditingController,
      keyboardType: TextInputType.none,
      style: TextStyle(
        fontWeight: FontWeight.w400,
        fontSize: 20,
        letterSpacing: 1,
        fontFamily: 'Arial',
      ),
      minLines: 1,
      maxLines: 1,
      validator: null,
      decoration: InputDecoration(
        contentPadding: const EdgeInsets.symmetric(
          vertical: 15.0,
          horizontal: 15.0,
        ),
        errorStyle: TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 20,
          letterSpacing: 1,
          fontFamily: 'Arial',
          color: Colors.red,
        ),
        errorMaxLines: 3,
        labelText: 'test dskjhfkjshf kdjdfhkjshf ksdjfhkjshf ksjdhfkjshdf kjhfkjshkf skjdfhkjsdjhf kjdhfkhsf',
        labelStyle: MaterialStateTextStyle.resolveWith(
              (Set<MaterialState> states) =>
                  TextStyle(
                    fontWeight: FontWeight.w400,
                    fontSize: 20,
                    letterSpacing: 1,
                    fontFamily: 'Arial',
                  ),
        ),
        floatingLabelStyle: MaterialStateTextStyle.resolveWith(
              (Set<MaterialState> states) {
            return TextStyle(
              fontWeight: FontWeight.w400,
              fontSize: 20,
              letterSpacing: 1,
              fontFamily: 'Arial',
            );
          },
        ),
        counterText: '',
      ),
    )

字符串
我尝试设置floatingLabelStylelabelStyle属性的overflow: TextOverflow.visible,但这没有任何作用,示例中的省略号一直溢出。
关于错误信息溢出,这里讨论的正是the same issue,唯一的方法是将InputDecorationerrorMaxLines设置为大于1的整数。但是没有floatingLabelMaxLines之类的,所以我想知道这是否可能?
我正在MacBook Pro上的iPhone 15模拟器上尝试这个,iOS 17。

xvw2m8pv

xvw2m8pv1#

TL;DR使用InputDecoration.label并自己传递一个Text,而不是使用InputDecoration.labelText,它接受一个被省略的字符串。

让我们来看看TextFormField小部件的源代码:

return UnmanagedRestorationScope(
             bucket: field.bucket,
             child: TextField(
               restorationId: restorationId,
               controller: state._effectiveController,
               focusNode: focusNode,
               decoration: effectiveDecoration.copyWith(errorText: field.errorText),

字符串
https://github.com/flutter/flutter/blob/78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9/packages/flutter/lib/src/material/text_form_field.dart#L200C31-L200C31
它使用TextField小部件。好的。让我们看看它的内部:

if (widget.decoration != null) {
      child = AnimatedBuilder(
        animation: Listenable.merge(<Listenable>[ focusNode, controller ]),
        builder: (BuildContext context, Widget? child) {
          return InputDecorator(
            decoration: _getEffectiveDecoration(),
            baseStyle: widget.style,
            textAlign: widget.textAlign,
            textAlignVertical: widget.textAlignVertical,


https://github.com/flutter/flutter/blob/78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9/packages/flutter/lib/src/material/text_field.dart#L1448C33-L1448C33
它使用InputDecorator来显示装饰(它保存了你的标签)。让我们看看这个:

final Widget? label = decoration.labelText == null && decoration.label == null ? null : _Shaker(
      animation: _shakingLabelController.view,
      child: AnimatedOpacity(
        duration: _kTransitionDuration,
        curve: _kTransitionCurve,
        opacity: _shouldShowLabel ? 1.0 : 0.0,
        child: AnimatedDefaultTextStyle(
          duration:_kTransitionDuration,
          curve: _kTransitionCurve,
          style: widget._labelShouldWithdraw
            ? _getFloatingLabelStyle(themeData, defaults)
            : labelStyle,
          child: decoration.label ?? Text(
            decoration.labelText!,
            overflow: TextOverflow.ellipsis,
            textAlign: textAlign,
          ),
        ),
      ),
    );


https://github.com/flutter/flutter/blob/4bc7a44eb69056a6744f576c2cea656d65b656e2/packages/flutter/lib/src/material/input_decorator.dart#L2245-L2249
是的。如果InputDecoration.label为null,那么它确实会将labelText传递给Text小部件,该小部件的overflow显式设置为ellipsis。但是如果我们将label属性改为label呢?

TextField(
  decoration: InputDecoration(
    label: Text(lipsum),
  ),
)


我们得到一个多行标签!:)
x1c 0d1x的数据
从中得到的一个小教训是:深入研究Flutter的源代码!它真的是一个知识、内幕信息的来源,也是一种更深入了解Flutter如何工作和做事情的方法,以及--如果遇到这个问题--如何解决问题的方法。

vmdwslir

vmdwslir2#

labelText是一个字符串属性,将使用框架中的默认样式。如果需要更详细的标签,请考虑使用[label]。这是一个Widget属性

TextFormField(
  controller: txtCtrl,
  decoration: InputDecoration(
    label: const Text(
      'test dskjhfkjshf kdjdfhkjshf ksdjfhkjshf ksjdhfkjshdf kjhfkjshkf skjdfhkjsdjhf kjdhfkhsf',
    ),
    border: const OutlineInputBorder(),
    floatingLabelStyle: MaterialStateTextStyle.resolveWith(
      (Set<MaterialState> states) {
        return const TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 20,
          letterSpacing: 1,
          fontFamily: 'Arial',
        );
      },
    ),
  ),
)

字符串
结果:


的数据
由于它的Text小部件,您可以自定义任何样式。

相关问题