30天学会Flutter-04：布局基础（Container、Row、Column）

原创

于 2025-07-20 16:33:46 发布 · 881 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #javascript #前端

1. 使用Container进行布局和样式设置

Container是什么？

Container是一个方便的Widget，它结合了常见的绘制、定位和大小调整Widget的功能。它可以用来创建矩形视觉元素，并可以通过其属性进行高度定制。

Container的常用属性

child：Container内部的子Widget。
alignment：控制子Widget在Container内部的对齐方式。
padding：内边距，子Widget与Container边界之间的空间。
margin：外边距，Container与其他Widget之间的空间。
color：背景颜色。
decoration：装饰，可以设置背景图片、边框、圆角、阴影等复杂样式。如果设置了decoration，则不能直接设置color，color应该在decoration内部设置。
foregroundDecoration：前景装饰，绘制在子Widget之上的装饰。
width和height：指定Container的宽度和高度。如果未指定，Container会根据其子Widget的大小或其父Widget的约束来决定大小。
constraints：额外的约束条件，可以限制Container的最大/最小宽度和高度。
transform：对Container进行2D或3D变换（旋转、缩放、平移）。

Container示例

基本用法

import 'package:flutter/material.dart';

class BasicContainerExample extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Center(
      child: Container(
        width: 200,
        height: 100,
        color: Colors.blue, // 直接设置颜色
        child: Center(
          child: Text(
            'Hello Container!',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      ),
    );
  }
}

使用padding和margin

import 'package:flutter/material.dart';

class PaddingMarginExample extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Center(
      child: Container(
        margin: EdgeInsets.all(20), // 外边距
        padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15), // 内边距
        color: Colors.green,
        child: Text(
          'Padding & Margin',
          style: TextStyle(color: Colors.white, fontSize: 18),