Container 中的固定高度在 Flutter 中不起作用

Posted 2023-02-23

【中文标题】Container 中的固定高度在 Flutter 中不起作用

【英文标题】：Fixed height in Container is not working in Flutter

【发布时间】：2021-03-21 04:24:58

【问题描述】：

容器高度设置为固定 40，但是一旦我在 AppBar() 中使用该小部件，它就会占用所有可能的高度。这是我的自定义小部件的代码，它具有容器的固定高度，

class LPBorderButtonWithIcon extends StatelessWidget 
  final GestureTapCallback onPressed;
  final String text;
  final String iconAsset;
  final Color textColor;

  LPBorderButtonWithIcon(
      @required this.onPressed,
      @required this.text,
      @required this.textColor,
      @required this.iconAsset);

  @override
  Widget build(BuildContext context) 
    return GestureDetector(
        onTap: onPressed,
        child: Container(
          height: 40,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              border: Border.all(color: Color(0XFFd8dce1))),
          child: Row(
            children: [
              WidthSizedBox(15),
              Image.asset(
                iconAsset,
                height: 14,
                width: 14,
              ),
              WidthSizedBox(5),
              Text(text,
                  style: TextStyle(
                      color: textColor,
                      fontSize: 12,
                      fontFamily: "GilroyMedium")),
              WidthSizedBox(15),
            ],
          ),
        ));
  

我在这个屏幕上使用LPBorderButtonWithIcon()，

class CreateRulesScreen extends StatefulWidget 
  @override
  _CreateRulesScreenState createState() => _CreateRulesScreenState();


class _CreateRulesScreenState extends State<CreateRulesScreen> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        elevation: 1,
        centerTitle: false,
        titleSpacing: 0.0,
        leading: BackButton(
          color: LPColor.primary,
          onPressed: () 
            Navigator.of(context).pop();
          ,
        ),
        title: Text(
          "Create Rule",
          style: LPStyle.titleStyle,
        ),
        actions: [
          Container(
            margin: EdgeInsets.only(top: 12, bottom: 12, right: 16),
            child: LPBorderButtonWithIcon(
              onPressed: null,
              text: "Create",
              textColor: Color(0XFF508ff4),
              iconAsset: "images/ic_publish.png",
            ),
          )
        ],
      ),

    );
  

以下是自定义容器占据所有可能高度的结果。请让我知道如何为我的自定义小部件设置固定高度。

【参考方案1】：

将你的 Container 放在一个 Align 中，Aling 会强制容器只占据它需要的空间。

Align(
   child: Container(
   height: 20,
   width: 30,
   color: Colors.white,
  ),
)

【参考方案2】：

父小部件占用整个可用空间来绘制小部件，这里Container 是父小部件，它占用任何可用空间，因此要为Container 提供高度，需要放置在任何分配 小部件的 x,y 位置 以使其绘制的小部件。

Container(
    height: 40, // Its not going to apply height as it's parent widget
)

因此，要完成上述代码，您必须将 Container 与任何其他小部件（如 Center、Align 等）对齐。

例如：

Scaffold(
  body: Container(
    height: 600,
    color: Colors.red,
    child: Container(
      height: 200,
      color: Colors.yellow,
    ),
  ),
);

上面的示例子容器不会在 200 高度绘制黄色，它会占用整个 600 高度空间。

输出：

为了解决这个问题，我们为子 Container 分配了一些小部件，以便它可以获取 x、y 位置来开始绘制子小部件。这里使用了Center 小部件。

例如：

Scaffold(
      body: Container(
        height: 600,
        color: Colors.red,
        child: Center(
          child: Container(
            height: 200,
            color: Colors.yellow,
          ),
        ),
      ),
    );

输出：

一些限制：

小部件只能在给定的约束范围内决定自己的大小 它由它的父母。这意味着一个小部件通常不能有任何大小 想要。

小部件不知道也不决定自己在 屏幕，因为它是小部件的父级决定 小部件。

由于父级的大小和位置，反过来，也取决于 它自己的父级，不可能精确定义大小和 任何小部件的位置，而不考虑树 一个整体。

如果孩子想要与父母和父母不同的尺寸 没有足够的信息来对齐它，然后是孩子的大小 可能会被忽略。定义对齐时要具体。

参考链接：https://flutter.dev/docs/development/ui/layout/constraints