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),
)
相关推荐
小哥Mark12 小时前
Flutter开发鸿蒙年味 + 实用实战应用|绿色烟花:电子烟花 + 手持烟花
flutter·华为·harmonyos
一只大侠的侠13 小时前
Flutter开源鸿蒙跨平台训练营 Day 3
flutter·开源·harmonyos
一只大侠的侠14 小时前
【Harmonyos】Flutter开源鸿蒙跨平台训练营 Day 2 鸿蒙跨平台开发环境搭建与工程实践
flutter·开源·harmonyos
微祎_15 小时前
Flutter for OpenHarmony:构建一个 Flutter 平衡球游戏,深入解析动画控制器、实时物理模拟与手势驱动交互
flutter·游戏·交互
ZH154558913116 小时前
Flutter for OpenHarmony Python学习助手实战:面向对象编程实战的实现
python·学习·flutter
renke336417 小时前
Flutter for OpenHarmony:构建一个 Flutter 色彩调和师游戏,RGB 空间探索、感知色差计算与视觉认知训练的工程实现
flutter·游戏
王码码203517 小时前
Flutter for OpenHarmony 实战之基础组件:第三十一篇 Chip 系列组件 — 灵活的标签化交互
android·flutter·交互·harmonyos
ujainu19 小时前
Flutter + OpenHarmony 实现经典打砖块游戏开发实战—— 物理反弹、碰撞检测与关卡系统
flutter·游戏·openharmony·arkanoid·breakout
微祎_19 小时前
构建一个 Flutter 点击速度测试器:深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
王码码203519 小时前
Flutter for OpenHarmony 实战之基础组件:第二十七篇 BottomSheet — 动态底部弹窗与底部栏菜单
android·flutter·harmonyos