时间戳

首页 > 解决方案 > 如何在颤动中使文本与宽度允许的一样大

flutter - 如何在颤动中使文本与宽度允许的一样大

问题描述

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

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

标签： flutterflutter-layout

解决方案

我相信您正在寻找的是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"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

如果您想实际“拉伸”文本（即使实际字符更宽或更高），您将不得不做一些更自定义的事情。

如果是这种情况，请查看CustomPaint、CustomPainter、TextPainter以及Canvas 翻译和缩放选项。基本上，您需要创建一个扩展 CustomPainter 的类，您在其中创建了一个 TextPainter，以特定大小将其布置，将其绘制到画布上，然后对其进行缩放以适合 CustomPainter 的实际大小（或者您是否缩放首先是画布-我忘记了...）。然后，您将该类的一个实例传递给 CustomPaint。

推荐阅读