Hướng dẫn và ví dụ Flutter Container
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
Trong Flutter, Container là một hộp được sử dụng để chứa một widget con và đồng thời bạn có thể thiết lập kiểu dáng cho nó thông qua các property như padding, margin, alignment,... Container có tác dụng làm nổi bật một nội dung hoặc ngăn cách nội dung này với các nội dung khác.
Container Constructor:
Container Constructor
Container(
{Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
Decoration decoration,
Decoration foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child,
Clip clipBehavior: Clip.none}
)
Có rất nhiều tham số tham gia vào việc tạo ra một Container, chẳng hạn width, height, child, alignment,.. đồng thời nó cũng chịu ảnh hưởng từ các giàng buộc của widget cha, vì vậy hành vi bố cục của Container khá phức tạp. Chúng ta sẽ lần lượt xem các ví dụ trong các tình huống khác nhau:
Case 1:
Trường hợp các tham số width, height được chỉ định, và widget cha bị giới hạn (bounded) thì Container sẽ định kích thước của nó theo các tham số được cung cấp.
Ví dụ: Một Container được chỉ định (width, height)=(200,200) là con của một đối tượng Center, nó sẽ có kích thước 200x200.
Center (
child: Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(10, 5, 50, 5),
width: 200,
height: 200
)
)
Case 2:
Nếu các tham số child, width, height, constraints không được chỉ định (hoặc null), và widget cha không bị giới hạn (unbounded) thì Container sẽ cố gắng định kích thước của nó nhỏ nhất có thể.
Hãy xem một ví dụ: Một Container với các tham số width, height, child, constraints không được chỉ định, và là con của một Row, nó sẽ cố gắng định kích thước theo phương ngang của nó nhỏ nhất có thể.
Chú ý: Row là một widget bị giới hạn (bounded) theo phương thẳng đứng nhưng không bị giới hạn (unbounded) theo phương ngang.
Row (
children: [
Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
)
]
)
Case 3:
Nếu các tham số child, width, height, constraints không được chỉ định (hoặc null), và widget cha bị giới hạn (bounded) thì Container sẽ cố gắng định kích thước của nó lớn nhất có thể.
Ví dụ: Một Container với các tham số child, width, height, constraints không được chỉ định và là con của một Center, kích thước của Container sẽ lớn nhất có thể.
Center (
child: Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70)
)
)
Case 4:
Nếu child được chỉ định, nhưng các tham số width, height, constraints và alignment không được chỉ định, thì Container sẽ nhỏ nhất có thể và tuân thủ các giàng buộc từ widget cha.
Ví dụ:
Center (
child: Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
child: ElevatedButton (
child: Text("Button"),
onPressed: () {},
)
)
)
Ví dụ:
ConstrainedBox (
constraints: BoxConstraints (
maxWidth: 300,
maxHeight: 200
),
child: Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
child: ElevatedButton (
child: Text("Button"),
onPressed: () {},
)
)
)
Case 5:
Nếu child và alignment được chỉ định, nhưng các tham số width, height, constraints không được chỉ định, thì Container sẽ lớn nhất có thể.
Xem thêm ví dụ tại phần alignment (Phía dưới đây).
Property alignment được sử dụng để căn chỉnh (align) vị trí của child bên trong Container.
AlignmentGeometry alignment
Nếu Container được chỉ định child, và không được chỉ định width, height, constraints và alignment nó sẽ định kích thước của nó nhỏ nhất có thể. Tuy nhiên nếu Container được chỉ định child và alignment nhưng không được chỉ định width, height, constraints nó sẽ định kích thước của nó lớn nhất có thể.
Container (
alignment: Alignment.bottomRight,
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
child: ElevatedButton (
child: Text("Button"),
onPressed: () {},
)
)
- TODO Link?
Property padding được sử dụng để tạo ra một không gian trống bên trong Container và bao quanh child (nếu có).
EdgeInsetsGeometry padding
Property color được sử dụng để sét đặt mầu nền cho Container, và phía sau (behind) child.
Color color
Property decoration được sử dụng để vẽ một cái gì đó trên nền của Container và đằng sau (behind) của child. Nếu bạn muốn vẽ một mầu trên nền của Container (và đằng sau của child) tốt nhất nên sử dụng property color.
Decoration decoration
Container (
alignment: Alignment.center,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: const DecorationImage(
image: NetworkImage('https://s3.o7planning.com/images/tom-and-jerry.png'),
fit: BoxFit.cover,
),
border: Border.all( color: Colors.black, width: 8),
borderRadius: BorderRadius.circular(12),
),
margin: EdgeInsets.all(30),
child: ElevatedButton(
child: Text("I am a Long Button"),
onPressed: () {}
)
)
- TODO Link?
Property foregroundDecoration được sử dụng để vẽ một cái gì đó trên nền của Container, phía trước (front) của child. Nó có thể bao phủ và làm bạn không nhìn thấy child, tuy nhiên bạn vẫn có thể tương tác với child.
Decoration foregroundDecoration
Ví dụ:
Container (
alignment: Alignment.center,
foregroundDecoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage('https://s3.o7planning.com/images/smile-64.png'),
fit: BoxFit.none,
),
border: Border.all( color: Colors.black, width: 8),
borderRadius: BorderRadius.circular(12),
),
margin: EdgeInsets.all(30),
child: ElevatedButton(
child: Text("I am a Long Button"),
onPressed: () {}
)
)
double width
double height
Property constraints được sử dụng để thêm các giàng buộc bổ xung cho Container.
BoxConstraints constraints
Ví dụ:
Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.all(30),
width: 200,
height: 200,
constraints: BoxConstraints(
maxHeight: 80
),
child:ElevatedButton(
child: Text("Button"),
onPressed: (){},
)
)
- TODO Link?
Property margin được sử dụng để tạo ra một không gian trống bao quanh Container.
EdgeInsetsGeometry margin
Matrix4 transform
Widget child
Clip clipBehavior: Clip.none
- TODO Link?
