Question

我正在编写一个非常简单的优惠券应用程序，但是我在文本上苦苦挣扎。我正在将我的应用程序从Kotlin重写为Flutter。在Kotlin中，我有ConstraintLayout，它使我能够快速设计界面。我还有一个名为autoSizeTextType =“ uniform”的属性，该属性使我可以在不同的屏幕尺寸上自动调整文本大小。

看看我的照片。在iPhone 11 Max Pro上，我的卡片和文字之间有空白。我希望我的文字在不同的屏幕比例下自动调整大小。

但是，在我的Pixel 3A仿真器上，文本大小合适。

如何允许我的文字在不同的屏幕比例下响应？

代码

import 'package:flutter/material.dart';

class ClassicCouponScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('DATA WYDANIA:', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
                      Text('23/12/2019', style: TextStyle(color: Colors.black))
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
                      Text('S-58-pS-8', style: TextStyle(color: Colors.black))
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Image.asset('assets/images/coupon_hamburger.png'),
              SizedBox(height: 16.0,),
              Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', style: TextStyle(color: Colors.black)),
              Spacer(),
              Container(
                height: 95.0,
                child: Card(
                  color: Colors.orange,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('DRUKUJ /', style: TextStyle(fontSize: 30.0)),
                      Text('ZAPISZ JAKO PDF', style: TextStyle(fontSize: 30.0))
                    ],
                  ),
                ),
              ),
              Container(
                height: 95.0,
                child: Card(
                  color: Colors.orange,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('PRZEŚLIJ KUPON', style: TextStyle(fontSize: 30.0)),
                      Text('(WYSYŁKA W CIĄGU 24 GODZIN)', style: TextStyle(fontSize: 20.0))
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      )
    );
  }
}

Answer 1

使用flutter_screenutil使文本响应。用法：

初始化Screen.instance，使其宽度build内要支持的最高屏幕比例的宽度px和高度px

ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

Text('Hello World', style: TextStyle(
   color: Colors.white,
   fontSize: ScreenUtil.getInstance().setSp(12)),
  ),
)

您也可以引用此博客https://medium.com/nonstopio/let-make-responsive-app-in-flutter-e48428795476

Answer 2

您可以利用auto_size_text package来实现所需的行为。

首先，您必须add it as a dependency到pubspec.yaml文件：

dependencies:
  auto_size_text: ^2.1.0

安装软件包后，您将可以在布局内使用它：

import 'package:auto_size_text/auto_size_text.dart';

// ...
children: [
  // ...
  Expanded(
    child: AutoSizeText(
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
      style: TextStyle(color: Colors.black),
    ),
  ),
  // ...
],
// ...

Answer 3

这可以解决您的问题：https://pub.dev/packages/auto_size_text

用法

AutoSizeText的行为与Text完全相同。唯一的区别是它将调整文本的大小以适合其边界。

AutoSizeText(
  'The text to display',
  style: TextStyle(fontSize: 20),
  maxLines: 2,
)

如何使文本自动调整大小？

代码

3 个答案: