Flutter-Padding组件

1. 说明        

在html中常见的布局标签都有padding属性，但是Flutter中很多Widget是没有padding属性。这个时候 我们可以用Padding组件处理容器与子元素之间的间距

2. 属性

        padding：padding值, EdgeInsetss设置填充的值

        child：子组件

3. 示例

（1）EdgeInsets方法说明

EdgeInsets.fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向，必须填值。

EdgeInsets.all(double value) : 所有方向使用相同数值。

EdgeInsets.only({left, top, right ,bottom })：可以设置具体某个方向(也可以同时指定多个方向)。

EdgeInsets.symmetric({vertical, horizontal})：用于设置对称方向，vertical指top和bottom，horizontal指left和right。

（2）代码示例

import 'package:flutter/material.dart';
import '../../res/listData.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("FLutter App")),body: const HomePage(),),);}
}class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return GridView.count(padding: const EdgeInsets.all(10),crossAxisCount: 2,childAspectRatio: 1,children: [Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/1.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/2.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/3.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/4.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/5.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/6.png', fit: BoxFit.cover),),],);}
}