Hướng dẫn và ví dụ Flutter EdgeInsetsGeometry
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
EdgeInsetsGeometry được sử dụng để tạo ra một inner padding (khoảng đệm bên trong) hoặc một outer padding (khoảng đệm bên ngoài) cho một Widget.
Trong khoa học máy tính, thuật ngữ "margin" được sử dụng thay thế cho "outer padding", và "padding" được sử dụng thay thế cho "inner padding".
Hãy xem một hình minh họa đơn giản, một widget Container trước và sau khi được thêm "outer padding" và "inner padding":
Lớp EdgeInsetsGeometry là một lớp trừu tượng (abstract class) vì vậy không thể sử dụng nó một cách trực tiếp, tuỳ vào tình huống bạn có thể sử dụng lớp con của nó là EdgeInsets hoặc EdgeInsetsDirectional.
- TODO Link?
EdgeInsets giúp tạo ra outer padding (hoặc inner padding) dựa trên các tham số trực quan left, top, right, bottom, nó không phụ thuộc vào hướng của văn bản (text direction).
Ví dụ, sử dụng EdgeInsets tạo một "Outer padding" (margin) với các tham số (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)
)
)
EdgeInsetsDirectional giúp tạo ra outer padding (hoặc inner padding) dựa trên các tham số start, top, end, bottom. Hai tham số start và end phụ thuộc vào hướng của văn bản (text direction).
Cụ thể:
- Nếu hướng của văn bản là "Trái sang phải" thì "start" tương ứng với "left" và "end" tương ứng với "right".
- Ngược lại nếu hướng của văn bản là "Phải sang Trái" thì "start" tương ứng với "right" và "end" tương ứng với "left".
Ví dụ, sử dụng EdgeInsetsDirectional tạo một "Outer padding" (margin) với các tham số (start, top, end, bottom) = (150, 70, 50, 30) bạn sẽ nhận được 2 kết quả khác nhau tuỳ thuộc vào hướng của văn bản:
textDirection = TextDirection.rtl (Right to Left):
main.dart (ex4)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'o7planning.org',
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)
)
)
],
)
)
);
}
}
- TODO Link?
