时间戳

首页 > 解决方案 > 在列的可用空间中拉伸小部件

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

问题描述

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

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

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

我试着放在Flex里面并用/Column包裹起来。但即使在包装后我仍然得到约束错误：ContainersFlexibleExpandedflexColumnSizedBox

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)),
        ],
      ),
    );
  }
}

标签： androidflutterdartmobileflutter-layout

解决方案

这是我所做的：

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小部件灵活。

推荐阅读