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),
)
相关推荐
LawrenceLan1 天前
Flutter 零基础入门(九):构造函数、命名构造函数与 this 关键字
开发语言·flutter·dart
一豆羹1 天前
macOS 环境下 ADB 无线调试连接失败、Protocol Fault 及端口占用的深度排查
flutter
行者961 天前
OpenHarmony上Flutter粒子效果组件的深度适配与实践
flutter·交互·harmonyos·鸿蒙
行者961 天前
Flutter与OpenHarmony深度集成:数据导出组件的实战优化与性能提升
flutter·harmonyos·鸿蒙
小雨下雨的雨1 天前
Flutter 框架跨平台鸿蒙开发 —— Row & Column 布局之轴线控制艺术
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨1 天前
Flutter 框架跨平台鸿蒙开发 —— Center 控件之完美居中之道
flutter·ui·华为·harmonyos·鸿蒙
小雨下雨的雨1 天前
Flutter 框架跨平台鸿蒙开发 —— Icon 控件之图标交互美学
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨1 天前
Flutter 框架跨平台鸿蒙开发 —— Placeholder 控件之布局雏形美学
flutter·ui·华为·harmonyos·鸿蒙系统
行者962 天前
OpenHarmony Flutter弹出菜单组件深度实践:从基础到高级的完整指南
flutter·harmonyos·鸿蒙
前端不太难2 天前
Flutter / RN / iOS,在长期维护下的性能差异本质
flutter·ios