Question

我正在Flutter中编写一个简单的优惠券应用程序，但是我在处理文本小部件。我希望它具有响应性，因此，当我在屏幕比例不同的手机上打开应用程序时，它应该看起来一样。

我打算如何显示：

在屏幕比例为19：9的手机上的外观：

18：9屏幕比例

我的代码：

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();

    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(_makdolan.calculateDate(), 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 Makdolan w Polsce z wyłączeniem restauracji znajdują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.makdolan.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)
                    )
                  ]
                ),
                maxFontSize: 14.0,
              ),
              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

您可以尝试使用“灵活/扩展”窗口小部件为列中的每个窗口小部件分配空间。这应该使您的列具有响应性。另外，尝试将文本窗口小部件放入FittedBox小部件内，以使文本大小响应。

Answer 2

使用 MediaQuery 或 AspectRatio 类，请参见：

https://stackoverflow.com/a/49806752/5034248

如何使文本在不同的屏幕比例下更改其字体大小？

2 个答案: