Question

我有一个容器，需要在其中显示条形码（这是虚拟保真卡的应用程序），我希望条形码在屏幕上尽可能宽。现在，我将字体大小设置为适合所有设备的合理大小，但这当然只是暂时的。我该如何解决？这是我用来构建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))
        ]
      ),
    )
  );
}

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 translate和scale选项。基本上，您需要创建一个扩展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

您可以使用装配盒小部件。

FittedBox(child:Text('text sample'));

https://api.flutter.dev/flutter/widgets/FittedBox-class.html

Answer 4

FittedBox仅在提供一些约束的情况下才起作用，因此请确保提供一个约束，例如提供高度，如下所示：

SizedBox(
  height: 400, // 1st set height
  child: FittedBox(child: Text("*")), // 2nd wrap in FittedBox
)

Answer 5

问题中的代码示例具有一个Text小部件，它是children:小部件中的Column之一。 Text父级的宽度未知。

因此，在这种情况下，为了最大化Text小部件的宽度和大小，请将Text小部件包装在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

FittedBox：

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

Answer 6

将文本包装在FittedBox小部件中，以强制将文本用框括起来。 FittedBox的大小将取决于其父级的小部件。在FittedBox中，“文本”小部件可以简单地“覆盖”框，因此文本不会拉伸以填充FittedBox中的可用空间。枚举BoxFit.fill是一种拉伸文本以适合FittedBox中可用的整个空间的方法。您可以通过更改FittedBox的父容器Container的高度和宽度来更改盒子的尺寸。

Container(
  height: _height,
  width: _width,
  FittedBox(               
    fit: BoxFit.fill,
    child: Text("Whee"),
  )
)

Answer 7

使用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;
}

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

7 个答案: