Flutter布局 --- Container

类型 作用特点
Container 只有一个子 Widget。默认充满,包含了padding、margin、color、宽高、decoration 等配置。
Padding 只有一个子 Widget。只用于设置Padding,常用于嵌套child,给child设置padding。
Center 只有一个子 Widget。只用于居中显示,常用于嵌套child,给child设置居中。
Stack 可以有多个子 Widget。 子Widget堆叠在一起。
Column 可以有多个子 Widget。垂直布局。
Row 可以有多个子 Widget。水平布局。
Expanded 只有一个子 Widget。在 Column 和 Row 中充满。
ListView 可以有多个子 Widget。自己意会吧。

在 Flutter 中,BoxDecoration 是一个用于装饰容器的类,它可以为 Widget(如 Container、Card 等)添加各种视觉效果。

基本概念

BoxDecoration 允许你为矩形区域添加背景色、边框、阴影、渐变、形状等装饰效果。

主要属性

1. color - 背景颜色

Dart 复制代码
Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle, // 圆形
    color: Colors.red,
  ),
  width: 100,
  height: 100,
  child: Icon(Icons.star, color: Colors.white),
)

2. border - 边框

Dart 复制代码
Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 2.0,
    ),
  ),
  child: Text('带边框'),
)

3. borderRadius - 圆角

Dart 复制代码
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12.0),
    color: Colors.green,
  ),
  child: Text('圆角容器'),
)
  1. boxShadow - 阴影
Dart 复制代码
Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        blurRadius: 5.0,
        offset: Offset(0, 3),
      ),
    ],
    color: Colors.white,
  ),
  child: Text('带阴影的容器'),
)

5. gradient - 渐变

Dart 复制代码
Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.blue, Colors.purple],
    ),
  ),
  child: Text('渐变背景'),
)

6. shape - 形状

Dart 复制代码
Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle, // 圆形
    color: Colors.red,
  ),
  width: 100,
  height: 100,
  child: Icon(Icons.star, color: Colors.white),
)
相关推荐
程序员Ctrl喵13 小时前
异步编程:Event Loop 与 Isolate 的深层博弈
开发语言·flutter
前端不太难15 小时前
Flutter 如何设计可长期维护的模块边界?
flutter
小蜜蜂嗡嗡16 小时前
flutter列表中实现置顶动画
flutter
始持16 小时前
第十二讲 风格与主题统一
前端·flutter
始持16 小时前
第十一讲 界面导航与路由管理
flutter·vibecoding
始持16 小时前
第十三讲 异步操作与异步构建
前端·flutter
新镜17 小时前
【Flutter】 视频视频源横向、竖向问题
flutter
黄林晴17 小时前
Compose Multiplatform 1.10 发布:统一 Preview、Navigation 3、Hot Reload 三箭齐发
android·flutter
Swift社区18 小时前
Flutter 应该按功能拆,还是按技术层拆?
flutter
肠胃炎18 小时前
树形选择器组件封装
前端·flutter