Flutter, 小语种带来的布局溢出问题解决方法汇总

无声黑白
513 阅读3分钟

前言

小语种普遍较长，特别是西班牙语和波兰语很长需要注意； 一般需要注意的是文字溢出和布局溢出的问题，debug模式会显示overflow，realease或其他模式会飞出去屏幕。 对于文字内容，需要注意是给省略号、还是换行； 对于布局，需要根据需求动态调整；

Text常见问题

1. 应该避免的写法

因为小语种普遍较长，所以写Text时，尽量避免出现这种写法： 因为当设置文字只有一行，外部又没有宽度限制，直接导致的结果：文本只显示一行，然后水平方向溢出。

Text(
  model.deviceName ?? "--",
  maxLines: 1,
  style: TextStyle(
      fontSize: 14 * kScale,
      fontWeight: FontWeight.bold,
      color: kColorHex(0x000000, alpha: 0.85)),
),

2. 显示省略号的写法

一般外部可以给个限制宽度，然后让text超出父布局宽度后显示省略号。 这种方法只适用于某些需要强制展示在一行，用户无需关心文本的全部内容。 父布局的宽度需要根据外部的布局进行调整，保证父布局不会溢出。

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 230 * kScale),
  child: Text(
    widget.model.plantName ?? "--",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(
        fontSize: 14 * kScale,
        color: kColorHex(0x000000, alpha: 0.85),
        fontWeight: FontWeight.bold),
  ),
),

3. 换行的写法

适用于：不需要强制展示在一行，可进行文本超出可换行的文本： Text只要不设置maxLine ：1 ，会自动换行，有时需要根据外面的布局调整加上一个Expand。

Expanded(
  child: Text(
    " ${LocaleKeys.contractMe.tr}",
    style: TextStyle(
        color: kColorHex(0x000000, alpha: 0.85),
        fontSize: 14 * kScale),
  ),
)

4. 输入框移动光标的写法

仅适用于Textfield，输入框可以通过对超长内容移动光标的方式，避免布局溢出，前提是输入框要有宽度限制，并且宽度限制后、外面的布局不会溢出：

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 260*kScale,),
  child: TextField(
    maxLines: 1,
    maxLength: 30,
    autofocus:  widget.autofocus ?? false,
    textAlign: TextAlign.start,
    buildCounter: (BuildContext context, {int? currentLength, int? maxLength, bool? isFocused}) => null,
    focusNode: _focusNode,
    controller: _textEditingController,
    decoration: InputDecoration(
      border: InputBorder.none,
    ),
    style: TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 14*kScale,
        color: kColorHex(0x000000,alpha: 0.85)
    ),
    onChanged: (value) {
      setState(() {
        _content = value;
      });
      //通知外面
      if(widget.onChanged != null) {
        widget.onChanged!(_content);
      }
    },
  ),
),

布局常见问题

1. Row

对于Row布局，当一行放置两个组件时， 对于布局长度为动态值的组件，应当注意水平布局溢出的问题，常见的办法是：换行、显示省略号、或者设置Expand 让组件自动填充剩余的内容。 对于布局长度为静态的组件，应当注意切换小语种后，内容变长后的布局，类似提示符应当修改成请输入，不应该写成”请输入邮箱或者手机，不超过30个字符”。

在Row布局里，有些长度动态的子控件，尽量Expand，让子控件填充剩余空间，类似这种： 有时使用Expand，布局会溢出，可能是row外面的嵌套有问题。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    _buildAlarmColorText(context),
    SizedBox(width: 6 * kScale,),
    Expanded(
      child: Text(
        model.deviceName ?? "--",
        overflow: TextOverflow.visible,
        style: TextStyle(
            fontSize: 14 * kScale,
            fontWeight: FontWeight.bold,
            color: kColorHex(0x000000, alpha: 0.85)),
      ),
    ),
    SizedBox(width: 6 * kScale,),
    _buildHanlderWidget(context),
  ],
),

2. 标签栏超出一行

电站概览页面和找回密码页面，有个横向的标签栏，加入小语种之后会溢出，因此横向标签需要支持滑动，让当前点击的标签显示在中间，可以使用 SingleChildScrollView 让标签滑动，然后设置标签滑动的具体内容。

3. 底部导航栏文字溢出

对于某些手机，圆角切得比较窄的，会存在底部导航栏文字溢出的问题。 这个暂时没有好的解决办法，因为无论换行还是显示省略号都是不对的，唯一的方法是修改文字内容，或者给简写

4. 顶部导航栏文字溢出

顶部导航栏文字溢出，换行是不行的，唯一的方法就是给省略号，或者直接改变文字长短。

5. 底部提示文字溢出

类似注册页面下方的用户协议，波兰语会溢出，调高到屏幕底部的边距即可

avatar
文章
阅读
粉丝