Flutter响应式文本实现咨询：从Kotlin迁移的屏幕适配难题

我完全理解你从Kotlin迁移到Flutter时的困扰——之前用ConstraintLayout的Guidelines可以轻松搞定不同屏幕比例的适配，但到Flutter里用AutoSizeText却没达到预期效果，尤其是18:9的屏幕上文本没法填满剩余空间。别担心，我们可以通过优化AutoSizeText的布局约束来解决这个问题，甚至能实现类似Guidelines的适配逻辑。

问题根源 #

你的AutoSizeText目前没有被赋予明确的宽度约束，在Column布局中它只会根据自身内容宽度来调整字号，而不会主动占据可用的剩余空间。加上18:9屏幕比16:9纵向空间更多，就出现了文本无法填充的情况。

解决方案：给AutoSizeText添加布局约束 #

我们可以结合Expanded和LayoutBuilder来让文本占据Column中的剩余可用空间，同时利用LayoutBuilder获取父容器的宽度，让AutoSizeText在这个宽度范围内自动调整字号。

修改后的核心代码片段

// 替换原来的AutoSizeText部分
Expanded(
  child: LayoutBuilder(
    builder: (context, constraints) {
      return AutoSizeText.rich(
        TextSpan(
          text: 'Kupon ten upoważnia do jednokrotnego odbioru produktu gratis przy kolejnym dowolnym zakupie z oferty klasycznej. Kupon ten ważny jest przez 7 dni od czasu jego wygenerowania i może być zrealizowany w dowolnej restauracji McDonald\'s w Polsce z wyłączeniem restauracji znajdyujących się na terenie Portu Lotniczego im. Fryderyka Chopina w Warszawie oraz Portu Lotniczego im. Lecha Wałęsy w Gdańsku. Szczegółowy regulamin ankiety „Opinia Gości" znajduje się na stronie ',
          style: TextStyle(color: Colors.black),
          children: [
            TextSpan(
              text: 'www.mcdonalds.pl ',
              style: TextStyle(color: Color(0xffffc300), decoration: TextDecoration.underline)
            ),
            TextSpan(
              text: 'w sekcji ',
              style: TextStyle(color: Colors.black)
            ),
            TextSpan(
              text: 'Regulaminy',
              style: TextStyle(color: Color(0xffffc300), decoration: TextDecoration.underline)
            )
          ]
        ),
        maxLines: 12,
        maxFontSize: 16, // 限制最大字号，避免文本过大
        minFontSize: 12, // 限制最小字号，保证可读性
        width: constraints.maxWidth, // 利用父容器的全部可用宽度
        textAlign: TextAlign.justify, // 可选：让文本两端对齐，填充更均匀
      );
    },
  ),
),

关键改动说明 #

1. Expanded：让AutoSizeText占据Column中Spacer上方的所有剩余纵向空间，确保文本区域能充分利用屏幕的额外空间（比如18:9屏幕的纵向空间）。
2. LayoutBuilder：获取当前父容器的宽度约束，让AutoSizeText明确知道自己可以使用的最大宽度，这样它就能在这个宽度内自动调整字号，填满空间。
3. 字号范围控制：通过maxFontSize和minFontSize避免文本字号过大或过小，保证在不同屏幕上的可读性。
4. TextAlign.justify：让文本两端对齐，视觉上更接近“填充空间”的效果，比默认的左对齐更适配响应式需求。

模拟Kotlin ConstraintLayout Guidelines的进阶技巧 #

如果你想完全复刻Guidelines的百分比适配逻辑，可以用MediaQuery获取屏幕尺寸，然后设置固定比例的宽度：

final screenWidth = MediaQuery.of(context).size.width;
final guidelineWidth = screenWidth * 0.95; // 比如使用屏幕宽度的95%作为文本宽度

// 然后把AutoSizeText的width设为guidelineWidth
width: guidelineWidth,

这样就和你在Kotlin里用Guidelines设置百分比宽度的效果完全一致了。

完整修改后的代码 #

import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';
import '../../helpers/makdolan.dart';

class GeneratedCouponScreen extends StatelessWidget {
  final String couponImage;

  GeneratedCouponScreen({Key key, @required this.couponImage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var _makdolan = Makdolan();
    var now = _makdolan.calculateDate();
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('DATA WYDANIA:', style: TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold)),
                      Text(now, style: TextStyle(color: Colors.black, fontSize: 16.0))
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold)),
                      Text(_makdolan.calculateUniqueCode(), style: TextStyle(color: Colors.black, fontSize: 16.0))
                    ],
                  )
                ],
              ),
              SizedBox(height: 8.0),
              Image.asset(couponImage),
              SizedBox(height: 8.0),
              // 修改后的AutoSizeText部分
              Expanded(
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    return AutoSizeText.rich(
                      TextSpan(
                        text: 'Kupon ten upoważnia do jednokrotnego odbioru produktu gratis przy kolejnym dowolnym zakupie z oferty klasycznej. Kupon ten ważny jest przez 7 dni od czasu jego wygenerowania i może być zrealizowany w dowolnej restauracji McDonald\'s w Polsce z wyłączeniem restauracji znajdyujących się na terenie Portu Lotniczego im. Fryderyka Chopina w Warszawie oraz Portu Lotniczego im. Lecha Wałęsy w Gdańsku. Szczegółowy regulamin ankiety „Opinia Gości" znajduje się na stronie ',
                        style: TextStyle(color: Colors.black),
                        children: [
                          TextSpan(
                            text: 'www.mcdonalds.pl ',
                            style: TextStyle(color: Color(0xffffc300), decoration: TextDecoration.underline)
                          ),
                          TextSpan(
                            text: 'w sekcji ',
                            style: TextStyle(color: Colors.black)
                          ),
                          TextSpan(
                            text: 'Regulaminy',
                            style: TextStyle(color: Color(0xffffc300), decoration: TextDecoration.underline)
                          )
                        ]
                      ),
                      maxLines: 12,
                      maxFontSize: 16,
                      minFontSize: 12,
                      width: constraints.maxWidth,
                      textAlign: TextAlign.justify,
                    );
                  },
                ),
              ),
              Spacer(),
              Card(
                child: Container(
                  height: 95.0,
                  color: Color(0xffffc300),
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('DRUKUJ /', style: TextStyle(fontSize: 28.0)),
                        Text('ZAPISZ JAKO PDF', style: TextStyle(fontSize: 28.0),)
                      ],
                    )
                  ),
                ),
              ),
              Card(
                child: Container(
                  height: 95.0,
                  color: Color(0xffffc300),
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('PRZEŚLIJ KUPON', style: TextStyle(fontSize: 28.0)),
                        Text('(WYSYŁKA W CIĄGU 24 GODZIN)', style: TextStyle(fontSize: 17.0),)
                      ],
                    )
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

这样修改后，你的文本在18:9屏幕上应该能完美填充可用空间，同时保持在16:9屏幕上的原有效果。

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