Home Articles

如何使文本与宽度一样大允许扑动

Asked
Viewed 1476 times
2

我有一个容器,我需要显示一个条形码(它是虚拟保真卡的应用程序),我希望条形码在屏幕上尽可能宽 . 现在我将字体大小设置为适合所有设备的合理大小,但它当然只是暂时的 . 我怎么解决这个问题?这是我用于构建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))
        ]
      ),
    )
  );
}

2 Answers

  • 4

    使用 TextPainter.width 和for循环查找最大的拟合字体大小(添加1效率不高,您可能需要对其进行微调):

    import 'package:flutter/material.dart';
    
    main() => runApp(MaterialApp(
          home: MyHomePage(),
          theme: ThemeData(platform: TargetPlatform.iOS),
        ));
    
    class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Text autoscale'),
          ),
          body: Padding(
            padding: EdgeInsets.all(32.0),
            child: Center(
              child: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  final text = 'Hello World';
                  final style = TextStyle(fontWeight: FontWeight.bold); // apply your barcode font here
                  final fontSize = calculateAutoscaleFontSize(text, style, 30.0, constraints.maxWidth);
                  return Text(
                    text,
                    style: style.copyWith(fontSize: fontSize),
                    maxLines: 1,
                  );
                },
              ),
            ),
          ),
        );
      }
    }
    
    double calculateAutoscaleFontSize(String text, TextStyle style, double startFontSize, double maxWidth) {
      final textPainter = TextPainter(textDirection: TextDirection.ltr);
    
      var currentFontSize = startFontSize;
    
      for (var i = 0; i < 100; i++) {
        // limit max iterations to 100
        final nextFontSize = currentFontSize + 1;
        final nextTextStyle = style.copyWith(fontSize: nextFontSize);
        textPainter.text = TextSpan(text: text, style: nextTextStyle);
        textPainter.layout();
        if (textPainter.width >= maxWidth) {
          break;
        } else {
          currentFontSize = nextFontSize;
          // continue iteration
        }
      }
    
      return currentFontSize;
    }
    
  • -2

    我相信你要找的是FittedBox .

    BoxFit适用于您想要拉伸/缩放儿童以适合盒子的“适合” . 它不会对文本执行纯粹的“拉伸”,而是应该占用的空间 . 您不应同时指定文本的大小 .

    看起来像这样:

    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"),
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }
    

    如果您想要实际“拉伸”文本(即使实际字符更宽或更高),您将不得不做一些更自定义的事情 .

    如果是这种情况,请查看CustomPaintCustomPainter,_ _1189059_和Canvas translatescale选项 . 基本上,您需要创建一个扩展CustomPainter的类,在该类中创建TextPainter,将其放置在特定大小,将其绘制到画布上,然后缩放它以适合CustomPainter的实际大小(或者您是否缩放画布第一 - 我忘了......) . 然后,您将该类的实例传递给CustomPaint .

Related