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.
@override
Widget 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);
@override
Widget 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),
),
],
);
}
}