Skip to main content

单个组件的容器

Align​

  • 用于在父组件内对齐子组件的位置
Align(
    alignment: Alignment.bottomRight,
    child: Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
),

Container​

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  margin: const EdgeInsets.all(4.0),
  padding: const EdgeInsets.all(4.0),
  child: null,
)

Center​

  • 用于将子组件居中对齐在父组件中
Center(
    child: Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
),

ClipRRect​

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.asset(
    'assets/images/image.jpg',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
),
  • 用于裁剪其子组件的显示范围
  • ClipOval：子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆
  • ClipRRect：将子组件剪裁为圆角矩形
  • ClipRect：默认剪裁掉子组件布局空间之外的绘制内容
  • ClipPath：按照自定义的路径剪裁

ConstrainedBox​

  • ConstrainedBox 作为 Container 的父级组件，对 Container 进行约束
  • 通过设置 constraints 属性为 BoxConstraints，限制了容器的宽高
ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100.0,
    maxWidth: 200.0,
    minHeight: 50.0,
    maxHeight: 100.0,
  ),
  child: null,
);

DecoratedBox​

  • 给子组件绘制一些装饰，如背景、边框、渐变等
 DecoratedBox(
   decoration: BoxDecoration(
     gradient: LinearGradient(colors:[Colors.red,Colors.orange.shade700]), //背景渐变
     borderRadius: BorderRadius.circular(3.0), //3像素圆角
     boxShadow: [ //阴影
       BoxShadow(
         color:Colors.black54,
         offset: Offset(2.0,2.0),
         blurRadius: 4.0
       )
     ]
   ),
  child: null,
)

Expanded​

  • 用于弹性布局的容器中的子部件
Expanded(
  flex: 1,
  child: null,
)

FittedBox​

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: FittedBox(
      fit: BoxFit.contain, child: Row(children: [Text('x' * 30)])),
),
  • 用于调整其子组件的大小以适应给定的约束条件

LayoutBuilder​

LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      return Container(
        width: constraints.maxWidth * 0.5,
        height: constraints.maxHeight * 0.5,
        color: Colors.blue,
      );
    },
),
  • 可以在布局过程中拿到父组件传递的约束信息，然后根据约束信息动态的构建不同的布局

Padding​

Padding(
  padding: EdgeInsets.all(16.0), // 设置内边距为16.0
  child: null,
)

SizeBox​

SizedBox(
  width: 200.0,
  height: 100.0,
  child: null,
);
  • SizedBox 用于指定固定尺寸，可以设置宽高的固定值

SingleChildScrollView​

SingleChildScrollView(
  physics: const BouncingScrollPhysics(),
  child:null
);

Transform​

变换​

Container(
  color: Colors.black,
  child: Transform(
    alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
    transform: Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: Colors.deepOrange,
      child: const Text('Apartment for rent!'),
    ),
  ),
)

平移​

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  //默认原点为左上角，左移20像素，向上平移5像素  
  child: Transform.translate(
    offset: Offset(-20.0, -5.0),
    child: Text("Hello world"),
  ),
)

旋转​

DecoratedBox(
  decoration: BoxDecoration(color: Colors.red),
  child: Transform.rotate(
    //旋转90度
    angle: 90,
    child: Text("Hello world"),
  ),
)

缩放​

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  child: Transform.scale(
    scale: 1.5, //放大到1.5倍
    child: Text("Hello world")
  )
);

UnconstrainedBox​

UnconstrainedBox(
  child: Container(
    width: 200.0,
    height: 100.0,
    color: Colors.blue,
    child: null,
  ),
);
  • UnconstrainedBox 用于取消约束限制，允许子组件自由调整大小