flutter - 如何在 Flutter 中为包含 Expanded 的容器添加背景色

Question

我目前遇到了 的问题布局在 flutter :/

所以我想添加一个 背景色到一个容器，其中嵌入了 栏目 带有 的小部件大小盒 & 已出 小部件。

布局就像没有颜色的魅力一样，但是当我添加 时会显示错误属性颜色 :(

这是代码:

Container(
  color: Colors.white // <- Not working when I add color property
  child: Expanded(
    child: Column(
      children: <Widget>[
        SizedBox(),
        Expanded()
      ],
    ),
  ),
),
SizedBox(),

这是错误:



有关信息，这是我想要实现的布局，我只想为蓝色容器设置背景颜色，将底部 SizedBox 设置为透明(以便查看橙色背景渐变)。



非常感谢提前!

Answer 1

这是您正在寻找的布局。你得到的错误是因为扩展需要一个 flex 布局。我对您需要与否的背景颜色天气感到困惑，但布局是在下面的代码中实现的。如果需要，您可以删除背景颜色

代码

import 'package:flutter/material.dart';



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
            child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                    gradient: LinearGradient(

                      begin: Alignment.topRight,
                      end: Alignment.bottomLeft,


                      colors: [

                        Color(0xffFFCE00),
                        Color(0xffE86F1C),
                      ],
                    ),
                    border: Border.all(
                        style: BorderStyle.solid, color: Colors.blue)),
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: MediaQuery.of(context).size.height / 3,
                      child: Container(
                          color: Colors.blueAccent,//remove color to make it transpatrent
                          child: Center(child: Text("This is Sized Box"))),
                    ),
                    Expanded(
                      child: Container(
                          decoration: BoxDecoration(
                              color: Colors.blueAccent,//remove color to make it transpatent
                              border: Border.all(
                                  style: BorderStyle.solid,
                                  color: Colors.white)),
                          child: Center(child: Text("This is Expanded"))),
                    ),
                    SizedBox(
                      height: MediaQuery.of(context).size.height / 4,
                      child: Center(child: Text("This is Sized Box")),
                    ),
                  ],
                ))),
      ],
    );
  }
}

这是布局SS



谢谢。我希望这对你有帮助