我正在努力使我的应用程序中的文本具有响应性,我正在从 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),)
],
),
)
),
)
],
),
),
)
);
}
}
最佳答案
你可以试试 screenutil包裹。 该方法基本上是根据屏幕宽度/高度/dpi 获取比率。因此,您可以相应地调整任何 UI 元素(如字体大小)。所以这个想法或多或少是为了匹配你原来测试过的设备(你有设计)上的字体大小,并使其适应其他分辨率。
这个想法是基本等式:
DesignScreenWidth -> 24pt(当前字体大小) Note9ScreenWidth -> x(为 note9 调整字体大小)
x = Note9ScreenWidth * 24 / DesignScreenWidth
因此,这就是您根据宽度、高度、屏幕 PPI 或其他因素获得任何比例来调整内容的方式。您基本上将这些值视为比例并乘以该归一化因子
currentFactor=currentValue/designedValue.
希望它能澄清一点“多分辨率感知”的概念
关于flutter - 如何在 Flutter 中使文本响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58150444/