Flutter：children 列的背景色

Question

我似乎无法理解 Flutter 向我抛出的无数布局小部件。我正在尝试创建一个显示 Column 和三个 children 的简单小部件：一个带有红色背景的 spacer，一个 Image 和另一个 space r 蓝色背景。 Image 应在屏幕垂直居中，第一个和第三个 child 共享 space。我设法实现了布局，但不知道如何设置背景颜色。这是我得到的：

      Column(
        children: [
          Spacer(flex: 1),
          Image(
            image: AssetImage("assets/colorPicker.jpeg"),
          ),
          Spacer(flex: 1),
        ],
      )

我尝试用具有适当 color 属性的 Container 包装 Spacer，但出现异常：

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ColoredBox widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  SizedBox.shrink ← Expanded ← Spacer ← ColoredBox ← Container ← Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← ⋯

这没有告诉我任何有用的信息。

Answer 1

您应该用另一个 Expanded.

将具有 Expanded 子项的列或行换行

Expanded(child: Column(
        children: [
          Spacer(flex: 1),
          Image(
            image: AssetImage("assets/colorPicker.jpeg"),
          ),
          Spacer(flex: 1),
        ],
      ))

Answer 2

您可以使用具有 flex:1 的灵活小部件和具有您选择的颜色的子容器。请看下面的代码：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
          Flexible(flex: 1, child:Container(color:Colors.red)),
          Image(
            image: NetworkImage("https://picsum.photos/350/200"),
          ),
          Flexible(flex: 1, child:Container(color:Colors.blue)),
        ],
    );
  }
}

Flutter：children 列的背景色

Flutter: background color for children of Column

layout

flutter