如何在 Flutter 中缩小和扩展 Wrap 小部件？答案

【问题标题】：How to shrink and expand a Wrap widget in Flutter?如何在 Flutter 中缩小和扩展 Wrap 小部件？
【发布时间】：2018-08-02 12:47:19
【问题描述】：

当父容器的大小增加或减少时，我想缩小和扩展我的 Wrap 小部件。各个孩子的字体应该随着盒子的大小而增加或减少。实现这一目标的最佳方法是什么？

我尝试了 FittedBox (scaledDown)，它减小了尺寸，但小部件根本不换行 (!)，所有子级都保持在一行上。

这是默认行为（如果 Wrap 小部件定义在具有特定大小的容器中）。

这里是代码...

  Widget _build(BuildContext context) {
    var words = ["a", "abc", "de", "ef", "g", "i", "is", "s", "th"];

    return new Scaffold(
      body: Column(children: <Widget>[
        Text('height 100'),
        Container(
          color: Colors.red,
          height: 100.0,
          child: Wrap(
            alignment: WrapAlignment.spaceEvenly,
            children: _buildWordButtons(words),
          ),
        ),
        Text('height 50'),
        Container(
          color: Colors.green,
          height: 50.0,
          child: Wrap(
            alignment: WrapAlignment.spaceEvenly,
            children: _buildWordButtons(words),
          ),
        ),
        Text('FittedBox, scaleDown, height 200'),
        Container(
          color: Colors.blue,
          height: 200.0,
          child: FittedBox(
            fit: BoxFit.scaleDown,
            child: Wrap(
              alignment: WrapAlignment.spaceEvenly,
              children: _buildWordButtons(words),
            ),
          ),
        ),
      ]),
    );
  }

  List<Widget> _buildWordButtons(List<String> words) {
    var buttons = List<Widget>();

    for (var word in words) {
      buttons.add(Container(
        decoration: new BoxDecoration(border: new Border.all(color: Colors.black)),
        child: Text(
          word,
          style: TextStyle(fontSize: 50.0),
        ),
        margin: EdgeInsets.all(5.0),
      ));
    }

    return buttons;
  }

【问题讨论】：

想要的渲染是什么？
How do I auto scale down a font in a Text widget to fit the max number of lines?的可能重复
@RémiRousselet 非常好的问题！（我一边笑一边挠头！）我认为我需要的行为是...... 1。转到子项中定义的最大尺寸（即字体：40），2.如果文本被切断，则尽可能多地包裹文本，3.如果项目仍然被切断，则缩小各个小部件......我应该用屏幕截图更新吗？这有意义吗？
我明白了。不知何故，这是一个相对困难的布局。
它不必完全一样，实际上只是当屏幕大一点时会扩大一点，如果有太多项目会缩小......如果有人有任何其他的想法...现在对大小进行硬编码:-)

标签： flutter

【解决方案1】：

如果您想创建一个 Text 小部件以适应其父小部件的大小，您可能需要查看 LayoutBuilder 小部件。使用这个小部件应该有助于其子小部件确定其父小部件的约束。既然您提到拥有宽敞的Container 应该在换行符中打印长文本，您可以将它设置在LayoutBuilder 中。

这是一个示例。我修改了sn-p提供的代码。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final words = ["a", "abc", "de", "ef", "g", "i", "is", "s", "th"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: <Widget>[
        Text('height 100'),
        Container(
          color: Colors.red,
          height: 100.0,
          child: adaptiveText(),
        ),
        Text('height 50'),
        Container(
          color: Colors.green,
          height: 50.0,
          child: adaptiveText(),
        ),
        Text('height 200'),
        Container(
          alignment: Alignment.center,
          color: Colors.blue,
          height: 200.0,
          child: adaptiveText(),
        ),
      ]),
    );
  }

  adaptiveText() {
    return LayoutBuilder(
      builder: (context, constraints) {
        debugPrint('constraint maxHeight: ${constraints.maxHeight}');
        // adapt Text widget if parent widget size is <= 100
        if (constraints.maxHeight <= 100)
          return FittedBox(
            fit: BoxFit.scaleDown,
            child: Wrap(
              alignment: WrapAlignment.spaceEvenly,
              children: _buildWordButtons(words),
            ),
          );
        else
          return Wrap(
            alignment: WrapAlignment.spaceEvenly,
            children: _buildWordButtons(words),
          );
      },
    );
  }

  List<Widget> _buildWordButtons(List<String> words) {
    var buttons = List<Widget>();

    for (var word in words) {
      buttons.add(Container(
        decoration:
            new BoxDecoration(border: new Border.all(color: Colors.black)),
        child: Text(
          word,
          style: TextStyle(fontSize: 50.0),
          maxLines: 3,
        ),
        margin: EdgeInsets.all(5.0),
      ));
    }

    return buttons;
  }
}

演示

【讨论】：