代码之家 › 专栏 › 技术社区 › DevelJoe

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

flutter ios

DevelJoe · 技术社区 · 2 年前

我正在进行只读 TextFormField widget 这样地:

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: '',
      ),
    )

我试着设置 overflow: TextOverflow.visible 的 floatingLabelStyle 和那个 labelStyle

the same issue 关于错误消息溢出进行了讨论,其中唯一的方法是设置 errorMaxLines 的 InputDecoration 为大于1的整数。但是没有 floatingLabelMaxLines 或者这样,所以我想知道这是否可能?

我正在MacBook Pro、iOS 17上的iPhone 15模拟器上尝试这个。

0 回复 | 直到 2 年前

Albert221 2 年前

太长,读不下去了 使用 InputDecoration.label 并通过a 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

对。如果 输入装饰标签 如果为空,那么它确实通过了你的 labelText 文本 具有以下功能的小部件 overflow 明确设置为 ellipsis 。但是如果我们把 label 那么,房地产呢?

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

我们得到了一个多行标签! :)

从中吸取了一个小教训:深入了解Flutter的源代码!这真的是一个知识、内幕信息的来源,也是一种更深入地了解Flutter如何工作和做事的方法,以及在这个问题的情况下,如何解决问题。

pmatatias 2 年前

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 小部件,您可以在其上自定义任何样式。