Question

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

我尝试了FittedBox（scaledDown），该方法可以减小大小，但是小部件根本不会自动换行（！），所有子项都保留在一行上。

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

这是代码...

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

Answer 1

如果您想创建一个文本小部件以适应其父小部件的大小，则可能需要研究LayoutBuilder小部件。使用此窗口小部件应有助于其子窗口小部件确定其父窗口小部件的约束。由于您已经提到过Container较宽，应该在换行符中打印长文本，因此可以在LayoutBuilder内设置它。

这是一个样本。我已经修改了提供的代码段。

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

演示

如何在Flutter中缩小和展开Wrap小部件？

1 个答案: