如何使文本在宽度上尽可能大

Question

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

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

Answer 1

我相信您正在寻找的是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。

Answer 2

FittedBox 对我有用，但有一个转折点。我还必须将我的 fontSize 样式设置为一个大数字才能使其工作。希望这可以帮助。

child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text(
                    "Your Expanded Text :)",
                    style: TextStyle(fontSize: 400.0),
                  ),
                ),

Answer 3

问题中的代码示例有一个小部件作为小部件Text之一。父级的宽度未知。children:ColumnText

Text因此，为了在这种情况下最大化小部件的宽度和大小，请将Text小部件包装在 a 中FittedBox，然后包装在 中Expanded。

child: Column(children: <Widget>[
  Expanded(
    child: FittedBox(
        fit: BoxFit.contain,
        child: Text(
          '123',
        )),
  ),
]),

Text即使设备旋转或屏幕大小调整，大小也应该自动正确调整大小，而不会出现溢出问题。

扩展：

/// A widget that expands a child of a [Row], [Column], or [Flex]
/// so that the child fills the available space.
///
/// Using an [Expanded] widget makes a child of a [Row], [Column], or [Flex]
/// expand to fill the available space along the main axis (e.g., horizontally for
/// a [Row] or vertically for a [Column]). If multiple children are expanded,
/// the available space is divided among them according to the [flex] factor.

从/flutter/packages/flutter/lib/src/widgets/basic.dart

装配盒：

/// Creates a widget that scales and positions its child within itself according to [fit].