Question

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

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

布局的工作原理就像没有颜色的装饰物，但是当我添加属性颜色时显示错误：：（

代码如下：

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

这是错误：

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

非常感谢！

Answer 1

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

Answer 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

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

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

2 个答案: