flutter - 如何在 Flutter 中使文本响应？

Question

我正在努力使我的应用程序中的文本具有响应性，我正在从 Kotlin 重写到 Flutter。

关键是我有一个文本小部件，它需要响应。当我在 16:9 屏幕比例的手机上打开它时，它很好，但是当我在 18:9 屏幕比例的手机上打开我的应用程序时，文本没有填充剩余空间。

在 Kotlin 中，我有 Contraint layout with guidelines 这使得工作变得非常容易，但我不知道如何在 Flutter 中做到这一点。

我正在使用 AutoTextSize 包，但它不起作用，我希望它能起作用。

在我的 Kotlin 应用程序中，它看起来像这样

在屏幕比例为 18:9 的三星 Note 9 上，在 Flutter 中看起来像这样:

我的代码:

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.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,
              ),
              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),)
                      ],
                    ),
                  )
                ),
              )
            ],
          ),
        ),
      )
    );
  }
}

Answer 1

你可以试试 screenutil包裹。该方法基本上是根据屏幕宽度/高度/dpi 获取比率。因此，您可以相应地调整任何 UI 元素(如字体大小)。所以这个想法或多或少是为了匹配你原来测试过的设备(你有设计)上的字体大小，并使其适应其他分辨率。

这个想法是基本等式:

DesignScreenWidth -> 24pt(当前字体大小)Note9ScreenWidth -> x(为 note9 调整字体大小)

x = Note9ScreenWidth * 24 / DesignScreenWidth

因此，这就是您根据宽度、高度、屏幕 PPI 或其他因素获得任何比例来调整内容的方式。您基本上将这些值视为比例并乘以该归一化因子

currentFactor=currentValue/designedValue.

希望它能澄清一点“多分辨率感知”的概念