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

一.基础容器-Align-对齐组件●作用精确控制其子组件在父容器空间内的对齐位置●alignment(对齐方式)子组件在父容器内的对齐方式。●widthFactor(宽度因子)Align的宽度将是子组件宽度乘以该因子●heightFactor(高度因子)Align的高度将是子组件高度乘以该因子对齐组件import package:flutter/cupertino.dart; import package:flutter/material.dart; void main(ListString 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进行四个方向设置import package:flutter/cupertino.dart; import package:flutter/material.dart; void main(ListString 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), ), ), ), ); } }child: Padding( padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20), child: Container(color: Colors.blue), ),