Flutter Container 同时设置 color 和 decoration 如何修复？

2026-11-06数据小许

结论

代码中最可能的问题是 Container 同时设置了 color 和 decoration。Flutter 不允许这两个属性同时使用，运行时可能因此触发断言。由于没有 VS Code 的具体错误提示，无法确认它标记的行是否就是这处冲突。

可以把背景色移到 BoxDecoration 中：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(
            height: 200,
            width: 800,
          ),
          padding: const EdgeInsets.all(8.0),
          alignment: Alignment.center,
          transform: Matrix4.rotationZ(0.1),
          decoration: const BoxDecoration(
            color: Color.fromARGB(255, 55, 134, 202),
            shape: BoxShape.circle,
          ),
          child: Text(
            'Hello World',
            style: Theme.of(context)
                .textTheme
                .headlineMedium!
                .copyWith(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

原因

原代码在同一个 Container 上分别设置了：

color: const Color.fromARGB(255, 55, 134, 202),
decoration: BoxDecoration(shape: BoxShape.circle),

Container.color 可以直接设置背景色，decoration 则能设置背景颜色、形状和边框等装饰。使用 decoration 时，把颜色放进 BoxDecoration.color，并移除 Container.color，避免同时设置背景。

其他需要留意的地方

BoxConstraints.expand(height: 200, width: 800) 会将容器设为宽 800、高 200。屏幕可用宽度不足时，布局可能溢出。可以根据实际布局调整尺寸，或使用适应父级空间的约束。
BoxShape.circle 会绘制圆形装饰。若希望容器的布局尺寸也接近圆形，可以将宽高设为相同值。目前宽高不同，圆形装饰不会填满整个 800 × 200 的布局区域。
context = StatelessElement (MyApp(dirty)) 这类文字通常用于调试信息，显示元素的状态。BuildContext 提供当前 Widget 在 Widget 树中的位置，仅凭这段文字无法判断具体错误。若修复属性冲突后仍有提示，请查看 VS Code 的完整诊断或运行时异常信息。