如何将 Flutter 列中的小部件缩小到可用大小？

Question

Column我有一个需要可变数量计时器的Flutter 。当需要一个计时器时，结果看起来像我想要的：

但是，如果我添加两个计时器，则会出现溢出：

我希望在第二种情况下计时器缩小以占用可用空间。如果我有四个计时器，理想情况下它也会显示两行和两列。

FittedBox我尝试用我设置的适合的计时器来包装我的计时器：BoxFit.fitHeight但这没有达到预期的结果。我还需要做什么？

按照评论中的要求使用 Wrap 代码：

Wrap(
        children: state.currentTimers
            .map((selectedTimer) => TimerSessionWidget(selectedTimer))
            .toList(),
      );

class TimerSessionWidget extends StatefulWidget {
  @override
  _SelectedTimerState createState() => _SelectedTimerState(_selectedTimer);

  final TimerSession _selectedTimer;

  TimerSessionWidget(this._selectedTimer);
}

class _SelectedTimerState extends State {
  final TimerSession _selectedTimer;

  _SelectedTimerState(this._selectedTimer);

  @override
  Widget build(BuildContext context) {
    return FittedBox(
      fit: BoxFit.fitHeight,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GestureDetector(
          behavior: HitTestBehavior.deferToChild,
          onTap: () {
            if (_selectedTimer.loadedTimerBloc.state is VirginTimerState) {
              _selectedTimer.loadedTimerBloc.add(StartTimerAction());
            } else if (_selectedTimer.loadedTimerBloc.state
                is FinishedTimerState) {
              _selectedTimer.stopAlarmSound();
            }
          },
          child: BlocProvider(
            builder: (context) {
              return _selectedTimer.loadedTimerBloc;
            },
            child: FittedBox(
              fit: BoxFit.fitHeight,
              child: Container(
                  height: 200,
                  width: 200,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                        width: 5.0,
                      )),
                  child: Stack(children: [
                    Align(
                        alignment: Alignment.center,
                        child: DurationDisplayWidget(_selectedTimer)),
                    Align(
                        alignment: Alignment.bottomCenter,
                        child: Padding(
                            padding: const EdgeInsets.all(20.0),
                            child: TimerActionWidget())),
                    Align(
                      alignment: Alignment.topRight,
                      child: RemoveTimerWidget(_selectedTimer),
                    )
                  ])),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

你应该把你的Column孩子裹在下面Expanded

“使用展开的小部件可以使行、列或 Flex 的子项展开，以填充沿主轴的可用空间（例如，行的水平方向或列的垂直方向）。如果展开多个子项，则可用空间为根据弹性系数进行划分。”来自https://api.flutter.dev/flutter/widgets/Expanded-class.html

例子：

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Expanded(
          child: Container(
              child: Container(
                  child: Image.network(
                      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQgQu8nlAEzW63m0pKcq9csbtk-3ni_QlvW4uy6DgeaWbO4Fze1")))),
      Expanded(
          child: Container(
              child: Container(
                  child: Image.network(
                      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQgQu8nlAEzW63m0pKcq9csbtk-3ni_QlvW4uy6DgeaWbO4Fze1")))),
      Expanded(
          child: Container(
              child: Container(
                  child: Image.network(
                      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQgQu8nlAEzW63m0pKcq9csbtk-3ni_QlvW4uy6DgeaWbO4Fze1")))),
      Expanded(
          child: Container(
              child: Container(
                  child: Image.network(
                      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQgQu8nlAEzW63m0pKcq9csbtk-3ni_QlvW4uy6DgeaWbO4Fze1")))),
      Expanded(
          child: Container(
              child: Container(
                  child: Image.network(
                      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQgQu8nlAEzW63m0pKcq9csbtk-3ni_QlvW4uy6DgeaWbO4Fze1")))),
      Expanded(
          child: Container(
              child: Container(
                  child: Image.network(
                      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQgQu8nlAEzW63m0pKcq9csbtk-3ni_QlvW4uy6DgeaWbO4Fze1")))),
    ]);
  }
}