flutter 两个Text控件,一个显示字符,一个显示数字,垂直方向不对齐问题

问题:flutter 两个Text控件,一个显示字符,一个显示数字,垂直方向不对齐问题

代码如下:

Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text("tabOrderAwaitingPutGoods".tr,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      height: AppSize.lineHeight,
                      fontSize: DimenUtils.font_sp14,
                      fontWeight: FontWeight.bold,
                      color: ColorUtils.text_blue)),
            ),
            SizedBox(width: 10.w),
            Text(
              key: _key,
              surplusPutGoodTimeStr(context),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
              style: widget.textStyle ??
              TextStyle(
                height: AppSize.lineHeight,
                fontSize: AppSize.textSize,
                fontWeight: FontWeight.w400,
                color: AppColors.textColor))
          ],
        )

效果图:


8bf0e2d5-968e-4126-8a6d-7d166760c18a.jpeg

解决方案

给两个Text设置StrutStyle,并把forceStrutHeight设置为true即可
代码如下:

Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text("tabOrderAwaitingPutGoods".tr,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  strutStyle: StrutStyle(
                      fontSize: DimenUtils.font_sp14, forceStrutHeight: true),
                  style: TextStyle(
                      height: AppSize.lineHeight,
                      fontSize: DimenUtils.font_sp14,
                      fontWeight: FontWeight.bold,
                      color: ColorUtils.text_blue)),
            ),
            SizedBox(width: 10.w),
            Text(
              key: _key,
              surplusPutGoodTimeStr(context),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
              strutStyle: StrutStyle(
                      fontSize: DimenUtils.font_sp14, forceStrutHeight: true),
              style: widget.textStyle ??
              TextStyle(
                height: AppSize.lineHeight,
                fontSize: AppSize.textSize,
                fontWeight: FontWeight.w400,
                color: AppColors.textColor))
          ],
        )

效果图如下:


2a8b42f4-ca61-494f-a93b-39b4d7465f84.jpeg
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容