有没有办法使用Container小部件用Column填充Row中的剩余空间?我试过使用Expanded,但集装箱不会占用可用的空间.

所需的Row设计类似于:

Desired design with filled container

在我的应用程序中,这Row被包装在Column中,而Container在使用Expanded时没有填满空间.

Sample app screenshot without filled container

示例应用程序:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Column(
          children: [
            const Text("Some text"),
            Row(
              children: [
                const Text("Flutter"),
                Expanded(
                  child: Container(color: Colors.pink),
                ),
              ],
            ),
            const Text("Some more text"),
          ],
        ),
      ),
    );
  }
}

如示例应用程序中所示,展开的容器不会以粉色背景显示.

推荐答案

try 使用IntrinsicHeight对行进行换行.

 Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text("Some text"),
      IntrinsicHeight(
        child: Row(
          children: [
            const Text('Flutter'),
            Expanded(
              child: Container(
                color: Colors.pink,
              ),
            ),
          ],
        ),
      ),
      const Text("Some more text"),
    ],
  ),

enter image description here

Flutter相关问答推荐

我希望我的flutter容器具有与css类似的squireCircle UI

Flutter -设计具有奇怪边界的容器的方法Radius

如何将图像从顶部和底部半向外设置为飘动

获取屏幕大小的滚动视图与动态大小?

我怎样才能在Ffltter中显示html布局链接?

在创建显示此错误的Flutter 深度链接时

Riverpod 2.0-如何使用FutureOr和AutoDisposeSyncNotificationer处理api状态代码?

Dart 和 flutter 错误无法在您的 PATH 中找到 git

Flutter:我的应用程序是否需要包含退款购买?

Flutter屏幕适配 - 在模拟器和真实手机上文本尺寸不同

允许文本小部件在容器之间溢出

Cloud firestore:如何使用 map 对象创建和更新嵌套数组

我无法从 Cloud firestore 访问文档字段并在 statefulwidget 类中显示它

避免长单词中断

在 flutter 中使用 Firebase 实时数据库数据创建无限滚动效果

我想在数组中添加项目

在 Flutter 中,如何使用文本字段和方形图像进行行布局

在 FAB 上添加表格小部件单击 FLUTTER

根据索引/变量更改小部件的 colored颜色

如何从 Flutter 中的列表中提取 JSON?