Flutter中具有最小高度的扩展小部件

Posted 2023-02-23

【中文标题】Flutter中具有最小高度的扩展小部件

【英文标题】：Expanded widget with minimum height in Flutter

【发布时间】：2020-10-20 12:46:53

【问题描述】：

我的问题的上下文：Expanded 小部件 收缩 其子小部件如果需要 零高度 并 忽略 它的孩子 约束。

目标：防止扩展的 widget 缩小到小于其子级大小，这样它的小部件就不会被破坏。

此外，我需要小部件占用所有可用空间并扩展其子级。

旁注： Container 用于分配高度空间，使expanded 对空间变化做出反应

代码如下：

import 'package:flutter/material.dart';

class MainScreen extends StatelessWidget 
  const MainScreen(Key key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: Card(
              color: Colors.blueAccent,
              child: LimitedBox(
                maxHeight: 200,
                child: Text(
                  'Test dummy text Test dummy text Test dummy text Test dummy text Test dummy text Test dummy text Test dummy text Test dummy text Test dummy text Test dummy text ',
                  style: TextStyle(fontSize: 60, color: Colors.black),
                ),
              ),
            ),
          ),
          Container(
            color: Colors.amberAccent,
            height: 105,
            width: 200,
          )
        ],
      ),
    );
  

这是不需要的电流输出：

Expanded 正常行为：

【问题讨论】：

你想要第二个输出吗？

没有。我想阻止第一次输出

【参考方案1】：

使用Flexible小部件并添加最小高度的Container，蓝色容器的大小将随着文本的增加而增加。

 Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView( 
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
              child: Container(
                constraints: BoxConstraints(
                    minHeight: 200, minWidth: double.infinity),
                child: Card(
                  color: Colors.blueAccent,
                  child: Text(
                    'Sample Text',
                    style: TextStyle(fontSize: 60, color: Colors.black),
                  ),
                ),
              ),
            ),
            Container(
              color: Colors.amberAccent,
              height: 105,
              width: 200,
            )
          ],
        ),
      )
  ),

输出：

【讨论】：

这个解决方案不能解决我的问题，我需要扩展和防止缩小文本行为

我不确定你现在想要什么，你能描述更多吗？

我想为展开的小部件添加最小高度，使其不会缩小到小于该尺寸

不，这不是我想要的，我希望您尝试：首先删除 SingleChildScrollView，然后尝试将 Container height 从 100 更改为 2000。您会注意到Flexible 缩小到非常小的尺寸并接管了文本。我想防止这种缩小文本的行为......我想得到container溢出其大小的错误......你会说只是删除Flexible小部件，但我希望小部件在扩展时灵活，因为我在动画中使用这种扩展行为。谢谢

简而言之.. 我需要Flexible 和minHeight 属性