如何在颤动中使文本与宽度允许的一样大 [英] How to make text as big as the width allows in flutter

问题描述

我有一个容器，我需要在其中显示条形码，我希望条形码在屏幕上尽可能宽.现在我将字体大小设置为适合所有设备的合理大小，但这当然只是暂时的.我该如何解决这个问题?这是我用于构建小部件的代码.

I have a Container where I need to show a barcode 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))
        ]
      ),
    )
  );
}

推荐答案

相信你要找的是 FittedBox.

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, TextPainter，以及 Canvas 翻译 &缩放 选项.基本上，您需要创建一个扩展 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屋！