Flutter中根据屏幕尺寸调整文本布局：移动端换行平板桌面单行

实现思路 #

基于现有断点规则，通过屏幕宽度动态切换文本内容：

• 屏幕宽度小于手机断点（kBreakpointSmall）时，保留原文本的换行符\n，显示为两行
• 屏幕宽度达到平板及以上时，将换行符替换为空格，让文本以单行展示

修改后的完整代码 #

child: Text(
  MediaQuery.sizeOf(context).width < kBreakpointSmall 
      ? 'MENTAL\nPREPARATION' 
      : 'MENTAL PREPARATION',
  textAlign: TextAlign.center,
  style: FlutterFlowTheme.of(context).headlineMedium.override(
        fontFamily: FlutterFlowTheme.of(context).headlineMediumFamily,
        color: Colors.black,
        fontSize: () {
          if (MediaQuery.sizeOf(context).width < kBreakpointSmall) {
            return 32;
          } else if (MediaQuery.sizeOf(context).width < kBreakpointMedium) {
            return 35;
          } else if (MediaQuery.sizeOf(context).width < kBreakpointLarge) {
            return 40;
          } else {
            return 45;
          }
        }(),
      ),
),

关键说明 #

• 复用原代码的断点判断逻辑，保证文本换行规则和字体大小的适配逻辑一致
• 通过三元运算符直接切换文本内容，逻辑简洁，无额外性能开销
• 仅依赖Flutter原生API，无需引入第三方库

内容的提问来源于stack exchange，提问作者Ajoy Lawrence