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

Question

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

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

我想在第二种情况下将计时器缩小以占用可用空间。如果我有四个计时器，则理想情况下还将显示两行两列。

我尝试用我设置为适合的FittedBox包装我的计时器：BoxFit.fitHeight，但是没有理想的结果。我还需要做什么？

注释中要求带有换行符的代码：

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下

“使用展开的窗口小部件会使Row，Column或Flex的子级展开以填充主轴上的可用空间（例如，水平表示行或垂直表示列）。如果展开多个子级，可用空间将根据伸缩系数进行划分。“ from 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")))),
    ]);
  }
}