如何向容器添加背景颜色，包括 Flutter 中的 Expanded

Question

我目前在Flutter中遇到布局问题：/

因此，我想向容器添加背景颜色，该容器嵌入带有SizedBox和Expanded小部件的列小部件。

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

这是代码：

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

这是错误：

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

预先非常感谢！

Answer 1

这是您正在寻找的布局。由于扩展需要弹性布局而出现的错误。我对您是否需要的背景颜色天气感到困惑，但布局是在下面的代码中实现的。如果您愿意，您可以删除背景颜色

代码

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的布局

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

Answer 2

@iStormz，您对颜色所做的事情Container是正确的，但您的使用Expanded是不正确的。Expanded只能在Row,Column或 内使用Flex。你有Expanded外面的Column。请在此处查找更多信息 - https://api.flutter.dev/flutter/widgets/Expanded-class.html