EdgeInsetsGeometry 用于为 Widget 创建内部填充或外部填充。在计算机科学中,术语“margin”用来代替“outer padding”,而“padding”用来代替“inner padding”。
让我们看一下这个简单的插图,一个容器(Container)小部件在添加“外部填充”和“内部填充”之前和之后:
EdgeInsetsGeometry 是一个抽象类,所以不能直接使用,根据情况可以使用它的子类 EdgeInsets 或 EdgeInsetsDirectional。
2. 边缘插图
边缘插图(EdgeInsets)有助于根据视觉参数左、上、右和下创建外边距(或内边距),而不依赖于文本方向。例如,使用 EdgeInsets 使用参数 (left, top, right, bottom) = (90, 70, 50, 30) 创建一个“外边距”(边距):
示例代码:
Container(
margin: EdgeInsets.fromLTRB(90, 70, 50, 30),
decoration: BoxDecoration(
color: Colors.greenAccent,
border: Border.all(color: Colors.blueGrey),
),
child: Text(
"Hi There!",
style: TextStyle(fontSize: 45)
)
)
显示效果如下 -
3. EdgeInsetsDirectional
EdgeInsetsDirectional 有助于根据参数 start、top、end 和 bottom 创建外部填充(或内部填充)。开始和结束参数都取决于文本方向。
具体来说:
- 如果文本方向是“从左到右”,“开始”将对应“左”,“结束”将对应“右”。
- 否则,如果文本方向是“从右到左”,“开始”将对应“右”,“结束”将对应“左”。
例如,使用 EdgeInsetsDirectional 创建一个“外边距”(边距),参数为 (start, top, end, bottom) = (150, 70, 50, 30)。根据文本方向将获得两种不同的结果:
textDirection = TextDirection.rtl (Right to Left):
示例代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiiba.com',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage()
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter EdgeInsetsGeometry Example")
),
body: Directionality (
textDirection: TextDirection.rtl,
child: Row (
children: [
Container (
margin: EdgeInsetsDirectional.fromSTEB(150, 70, 50, 30),
child:Text(
"الانتخابات الأمريكية في 2020",
style: TextStyle(fontSize: 18)
)
)
],
)
)
);
}
}