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

Posted 2023-02-23

【中文标题】如何为容器添加背景颜色，包括 Flutter 中的 Expanded

【英文标题】：How to add a background color to a Container including Expanded in Flutter

【发布时间】：2020-04-04 22:30:20

【问题描述】：

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

所以我想添加一个 background color 到一个容器，该容器嵌入一个 column Widget 和一个 SizedBox & Expended 小部件。

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

代码如下：

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

这是错误：

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

提前非常感谢！！

【参考方案1】：

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

【参考方案2】：

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

代码

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

谢谢，希望对你有帮助