如何使文字在宽度上尽可能大 [英] How to make text as big as the width allows in flutter

问题描述

我有一个容器，需要在其中显示条形码(这是用于虚拟保真卡的应用程序)，我希望条形码在屏幕上尽可能宽. 现在，我将字体大小设置为适合所有设备的合理大小，但这当然只是暂时的. 我该如何解决?这是我用来构建Widget的代码.

I have a Container where I need to show a barcode (it's a app for virtual fidelity cards) and I'd love to have the barcode to be as wide as possible on the screen. For now I set the font size at a reasonable size that suits all devices, but it's only temporary of course. How can I solve this? This is the code I am using for building the Widget.

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
      title: Text(_title),
    ),
    body: Container(
    padding: const EdgeInsets.all(12.0),
    child: Column(
      children: <Widget>[ 
        SizedBox(
          width: double.infinity,
          child: Text(_barcode, style: TextStyle(fontFamily: 'Code128', fontSize: 90.0))
        ),
        Text(_barcode, style: TextStyle(fontSize: 40.0))
        ]
      ),
    )
  );
}

推荐答案

我相信您正在寻找的是

I believe what you're looking for is FittedBox.

BoxFit会应用您想要拉伸/缩放孩子以适合盒子的任何适合"形状.它不会在文本上执行纯粹的拉伸"，而是要占用其空间.您不应同时指定文本的大小.

BoxFit applies whichever 'fit' you want to stretch/scale the child to fit in the box. It doesn't perform a pure 'stretch' on the text but rather the space it should take up. You shouldn't specify the text's size at the same time.

看起来像这样:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              color: Colors.blue,
              width: 300.0,
              height: 200.0,
              child: FittedBox(
                fit: BoxFit.contain,
                child: Text("Whee"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

如果您想实际拉伸"文本(即使实际字符变宽或变高)，则必须做一些自定义.

If you're wanting to actually 'stretch' the text (i.e. make the actual characters wider or taller) you'll have to do something a bit more custom.

在这种情况下，请查看 CustomPaint ， CustomPainter ，画布 翻译& ; 缩放选项.基本上，您需要创建一个扩展CustomPainter的类，在其中您创建了一个TextPainter，将其以特定的大小进行布局，将其绘制在画布上，然后对其进行缩放以适合CustomPainter的实际大小(或者您缩放该大小).首先是画布-我忘记了...).然后，您将该类的实例传递给CustomPaint.

If that's the case, look at CustomPaint, CustomPainter, TextPainter, and the Canvas translate & scale options. Basically, you would need to create a class extending CustomPainter in which you created a TextPainter, laid it out at a particular size, painted it onto the canvas, and then scaled it to fit the actual size of the CustomPainter (or do you scale the canvas first - I forget...). Then you'd pass an instance of that class to CustomPaint.

这篇关于如何使文字在宽度上尽可能大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！