Flutter第九节-----Align与Padding实战指南

浮江雾2026-07-19 8:37

一.基础容器-Align-对齐组件

●作用：精确控制其子组件在父容器空间内的对齐位置

●alignment(对齐方式)：子组件在父容器内的对齐方式。

●widthFactor(宽度因子)：Align的宽度将是子组件宽度乘以该因子

●heightFactor(高度因子)：Align的高度将是子组件高度乘以该因子对齐组件

Dart 复制代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(pagewidget());
}

class pagewidget extends StatelessWidget {
  const pagewidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Align组件实例",
      home: Scaffold(
        appBar: AppBar(title: Text("Align组件实例")),
        body: Container(
          color: Colors.blue, //设置置于哪个方向，这块是最中间
          child: Align(
            alignment: Alignment.center,
            child: Icon(
              Icons.star,
              size: 150,
              color: CupertinoColors.systemYellow,
            ),
          ),
        ),
      ),
    );
  }
}

●使用场景：当需要将一个组件放置在父容器的特定角落，Aign是理想选择。

●动态尺寸：通过widthFactor和heightFactor,可以创建出与子组件大小成比例的容器，动态布局中很有用

二.内边距组件-Padding

●作用：为其子组件添加内边距

●四个方向设置相同间距-使用Edgelnsets.all进行四个方向设置

Dart 复制代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(pagewidget());
}

class pagewidget extends StatelessWidget {
  const pagewidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Align组件实例",
      home: Scaffold(
        appBar: AppBar(title: Text("Align组件实例")),
        body: Container(
          decoration: BoxDecoration(color: CupertinoColors.systemYellow),
          child: Padding(
            padding: EdgeInsets.only(left: 10, top: 10),
            child: Container(color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

Dart 复制代码

child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
            child: Container(color: Colors.blue),
          ),