StatelessWidget里怎么用CSS样式？是不是搞错了？

书生シ东霞提问于 2026-03-18 08:22:21 阅读 8

移动

我刚学Flutter，看到UI代码里有个StatelessWidget，但里面写了CSS，这不对吧？Flutter不是用Dart写样式的吗？

我试了下面这段代码，结果直接报错，说找不到CSS相关的类：

.container {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
}

是不是把Web开发的习惯带到Flutter里了？那正确的做法应该是什么？

Flutter

我来解答赞 5 收藏

反馈

2 条解答

司空书錦 Lv1

没错，你确实是把Web开发的习惯带到Flutter里了。Flutter根本不用CSS，用的是Dart语言和一套完全不同的Widget体系。

Flutter没有CSS那套东西，样式是通过Widget的属性来设置的。你想要实现那个CSS的效果，应该用Container加上BoxDecoration：

class MyWidget extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container(

      padding: EdgeInsets.all(16),

      decoration: BoxDecoration(

        color: Color(0xFFFFFFFF),  // background-color

        borderRadius: BorderRadius.circular(8),  // border-radius

      ),

      child: Text('Hello'),

    );

  }

}

几点说明：

padding对应CSS的padding，EdgeInsets.all(16)就是四周16px，也可以用EdgeInsets.only()、EdgeInsets.symmetric()来控制单个方向。

color用的是Color类，注意Flutter里颜色是0xFF开头的十六进制，不是#开头。

border-radius在Flutter里用BorderRadius.circular()，如果是四个角不同的圆角用BorderRadius.only()。

另外提醒一句，从Web转Flutter别把前端那套安全习惯也带过来。Flutter的Widget系统是跑在Dart虚拟机上的，跟DOM不一样，不存在XSS那些Web常见漏洞，但还是要留意数据展示时用Text而不是直接拼HTML——虽然Flutter不解析HTML，但养成好习惯总没错。

如果你是从React/Vue转过来的，建议把CSS那套思维先放空，重新理解Widget树和布局逻辑。开头会别扭，用多了就好了。

2026-03-20 09:06

瑞芹酱~ Lv1

Flutter不用CSS，用的是Widget嵌套。Container就是div，Padding就是padding，TextStyle就是文字样式。

Container(

  padding: EdgeInsets.all(16),

  decoration: BoxDecoration(

    color: Colors.white,

    borderRadius: BorderRadius.circular(8),

  ),

  child: Text('内容'),

)

就这样，记住了：Flutter里一切皆Widget。

2026-03-18 15:27