垂直居中溢出的小部件

Question

我有一些限制在特定高度的用户生成的内容。任何超过该高度的东西都应该溢出并剪掉。

我已经通过使用 Wrap 小部件包装内容实现了这一点，但是我的额外要求是溢出的内容应始终在其父级中居中，请参见下图

当前的行为是第一个红色框，但我正在寻找的是将内容垂直居中，类似于框 #2

我使用的示例代码是：

Container(
      constraints: BoxConstraints(minHeight: 40, maxHeight: 40),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.red,
      ),
      clipBehavior: Clip.hardEdge,
      child: Wrap(
        children: [
          Column(
            children: [
              Text('Line1'),
              Text('Line2'),
              Text('Line3'),
              Text('Line4'),
              Text('Line5'),
              Text('Line6'),
              Text('Line8'),
              Text('Line9'),
              Text('Line10'),
            ],
          ),
        ],
      ),
    )

我已经尝试了 Wrap 小部件提供的各种对齐属性，但是其中 none 可以解决问题。我可以使用特定的 flutter 小部件来实现此目的吗？

Answer 1

您可以使用 FittedBox (https://api.flutter.dev/flutter/widgets/FittedBox-class.html) with BoxFit.none (https://api.flutter.dev/flutter/painting/BoxFit.html#none) 将可用 space 中的 child 居中，同时剪掉外面的所有内容。

Container(
  constraints: BoxConstraints(minHeight: 40, maxHeight: 40),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.red,
  ),
  clipBehavior: Clip.hardEdge,
  child: FittedBox(
    fit: BoxFit.none,
    child: Column(
      children: [
        Text('Line4'),
        Text('Line5'),
        Text('Line6'),
        Text('Line8'),
        Text('Line9'),
        Text('Line10'),
      ],
    ),
  ),
),

垂直居中溢出的小部件

Vertically centering an overflowing widget

flutter

flutter-layout