时间戳

首页 > 解决方案 > 如何使文本自动调整大小？

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

问题描述

我正在编写一个非常简单的优惠券应用程序，但我正在为我的文字而苦苦挣扎。我正在将我的应用程序从 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))
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      )
    );
  }
}

标签： flutterdartflutter-layout

解决方案

您可以使用该auto_size_text包来实现您想要的行为。

首先，您必须将其作为依赖项添加到您的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),
    ),
  ),
  // ...
],
// ...

推荐阅读