Question

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

重点是我有一个文本小部件，需要响应。当我在屏幕比例为16：9的手机上打开它时，还可以，但是当我在屏幕比例为18：9的手机上打开应用程序时，文本不会填充剩余的空间。

在Kotlin中，我使用了约束布局和准则，这使工作变得非常容易，但是我不知道如何在Flutter中做到这一点。

我正在使用AutoTextSize程序包，但是它无法正常工作。

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

在屏幕比例为18：9的Samsung 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元素（如fontsize）。因此，这个想法或多或少是为了匹配您最初测试的设备（您具有设计的设备）上的字体大小，并使它适应其他分辨率。

这个想法是基本公式：

DesignScreenWidth-> 24pt（当前字体大小） Note9ScreenWidth-> x（为note9调整的字体大小）

x = Note9ScreenWidth * 24 / DesignScreenWidth

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

currentFactor=currentValue/designedValue.

希望它澄清了“ 多分辨率意识”的概念

Answer 2

制作Sizer插件是针对不同屏幕尺寸制作响应文本的最简便方法。 a busy cat

检查此插件⬇️
https://pub.dev/packages/sizer

.sp - for font size

如果您想在任何屏幕尺寸的设备（平板电脑）中也设置响应文本大小，请在值后使用.sp。

示例：

Text('Sizer', style: TextStyle(fontSize: 12.0.sp))   //use SomeValue.sp in fonsize for responsive text

您还可以将此插件用于响应式小部件

.h  - for widget height
.w  - for widget width

示例：

Container(
  height: 10.0.h,  //10% height of screen
  width: 80.0.w,   //80% width of screen
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

Answer 3

这是一个名为auto_size_text 2.1.0的Flutter软件包，可以很好地解决您的问题。 https://pub.dev/packages/auto_size_text/versions/2.1.0#-readme-tab-

Answer 4

您好，有人在上面的答案中提到了它，您可以使用screenutil包来调整文本大小，这是一种好习惯。但我也想建议在Flutter中尝试FittedBox小部件，这在某些情况下也需要帮助，在某些情况下，屏幕util对屏幕util没有帮助。尽管它是使您的设计灵敏的好软件包。或者您也可以尝试针对不同的屏幕尺寸使用不同的文本尺寸。

如何在Flutter中使文本响应？

4 个答案: