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), ) ])), ), ), ), ), ); } }，但结果不理想。我还需要做什么？

注释中要求使用自动换行的代码：

{{1}}

Answer 1

您应将Column个孩子放在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")))),
    ]);
  }
}

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

1 个答案: