flutter3.0学习笔记

常用组件

Preview
  • 填充(Padding)
  • EdgeInsets

填充(Padding

Padding可以给其子节点添加填充(留白),和边距效果类似。其构造:

 const Padding({
    super.key,
    required this.padding, //EdgeInsets类
    super.child,
  }) 

EdgeInsets

  • fromLTRB(double left, double top, double right, double bottom):分别指定四个方向的填充。
  • all(double value) : 所有方向均使用相同数值的填充。
  • only({left, top, right ,bottom }):可以设置具体某个方向的填充(可以同时指定多个方向)。
  • symmetric({ vertical, horizontal }):用于设置对称方向的填充,verticaltop和bottomhorizontalleftright
 return Scaffold(
  appBar: AppBar(title: const Text('容器类组件'),),
  body: Padding(
    padding: const EdgeInsets.all(20),
    child: Column(
      //显式指定对齐方式为左对齐,排除对齐干扰
      crossAxisAlignment: CrossAxisAlignment.start,
      children:const [
        Padding(
            padding: EdgeInsets.only(left: 10),
            child: Text('左边添加10像素'),
        ),
        Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text('上下添加20像素'),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(20,40,20,20),
          child: Text('指定四个方向的补白'),
        ),
      ],
    ),

  ),
);

image.png