在列的可用空间中拉伸小部件

Posted 2023-02-23

【中文标题】在列的可用空间中拉伸小部件

【英文标题】：Stretching widgets in column's available space

【发布时间】：2021-11-03 16:34:46

【问题描述】：

我偶然发现了一个在原生 android 中相当明显的布局问题，但我无法让它在 Flutter 中运行。

假设我有这样的布局： Scaffold with AppBar + BottomNavBar + Column + Text

现在我想用 2 个小部件（Containers 在这种情况下，但可以是任何东西）填充剩余的空白空间，使其看起来像这样（拉伸并取出所有 剩余空格）：Column with remaining space filled

我尝试将Flex 放在Column 中，并用flex 将Containers 包裹在Flexible/Expanded 中。但即使将Column 包装在SizedBox 中，我仍然会收到约束错误：

The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

知道如何实现吗？我的这个屏幕的代码目前看起来像这样：

class MyHomePage extends StatelessWidget 
  MyHomePage(Key? key, required this.title) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text("Playground")),
      bottomNavigationBar: Container(
        width: double.infinity,
        height: 70,
        color: Colors.blueGrey,
      ),
      body: SizedBox(
        width: double.infinity,
        height: MediaQuery.of(context).size.height,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(top: 20, left: 20),
              child: Text("I am some text"),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 20, left: 20),
              child: Text("I am some text too"),
            ),
            FlexibleContent(),
          ],
        ),
      ),
    );
  


class FlexibleContent extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return SizedBox(
      child: Flex(
        direction: Axis.vertical,
        children: [
          Expanded(flex: 7, child: Container(width: double.infinity, color: Colors.lightGreen)),
          Expanded(flex: 3, child: Container(width: double.infinity, color: Colors.amberAccent)),
        ],
      ),
    );
  

【参考方案1】：

您的列具有无限的高度，因此您将它的子项包装在扩展/灵活的小部件中。您可以拥有一个包含 3 个子项的列，其中 2 个需要完全相同大小的子项可以排成一行，并且它的子项可以包装在扩展/灵活的小部件中。

【参考方案2】：

这就是我所做的：

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget 
  const MyHomePage(Key? key, required this.title) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: const Text("Playground")),
      bottomNavigationBar: Container(
        width: double.infinity,
        height: 70,
        color: Colors.blueGrey,
      ),
      body: Container(
        color: Colors.red,
        width: double.infinity,
        height: MediaQuery.of(context).size.height,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Padding(
              padding: EdgeInsets.only(top: 20, left: 20),
              child: Text("I am some text"),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20, left: 20),
              child: Text("I am some text too"),
            ),
            Flexible( // sorcery
              child: FlexibleContent(),
            ),
          ],
        ),
      ),
    );
  


class FlexibleContent extends StatelessWidget 
  const FlexibleContent(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Column(
      children: [
        Expanded(
          child: Container(
            width: double.infinity,
            color: Colors.lightGreen,
          ),
        ),
        Expanded(
          child: Container(
            width: double.infinity,
            color: Colors.amberAccent,
          ),
        ),
      ],
    );
  

如果您在Container 中添加任何内容，它应该会自动扩展以容纳内容。 Flexible 小部件很好，使其他 Column 小部件更加灵活。