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

Question

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



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



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

我尝试用 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 child 以下 Expanded
“使用 Expanded 小部件可以使 Row、Column 或 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")))),
    ]);
  }
}