Như các bạn đã biết trên ứng dụng Flutter việc thiết kế giao diện chủ yếu là widgets và sắp xếp bố cục các widgets đó một các hợp lý. Trong bài viết này sẽ khám phá một vài widgets cơ bản được sử dụng để xây dựng bố cục trong ứng dụng Flutter.
Layout trong Flutter
Layout trong Flutter bao gồm một hệ thống phân cấp các widget với các widget bên ngoài thường xử lý sự liên kết và cấu trúc trong khi các yếu tố bên trong thường là các yếu tố hiển thị trên chính trang đó, như các button và image, v.v.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">new</span> <span class="token class-name">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Column</span><span class="token punctuation">(</span> mainAxisAlignment<span class="token punctuation">:</span> MainAxisAlignment<span class="token punctuation">.</span>center<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token operator"><</span>Widget<span class="token operator">></span><span class="token punctuation">[</span> <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span> <span class="token string">'You have pushed the button this many times:'</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span> <span class="token string">'$_counter'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> Theme<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>textTheme<span class="token punctuation">.</span>display1<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
Trong ví dụ này, có ba widget: Center, Column và Text.
Center và Column xử lý cấu trúc và sắp xếp các thành phần bên trong chúng trong khi văn bản là thành phần duy nhất có thể nhìn thấy trực tiếp trong ứng dụng cho người dùng.
Một widget thường có các thuộc tính để thay đổi căn chỉnh, kiểu và thuộc tính.
Bây giờ chúng ta hãy đi sâu vào các vật dụng riêng lẻ và xem những gì họ làm.
Chúng tôi sẽ chia các widget thành hai loại:
- Widgets phần tử hiển thị
- Cấu trúc và căn chỉnh Widgets
Widgets phần tử hiển thị
Đây là một vài Widgets thường được sử dụng
1. Text
Một widget văn bản chỉ cần giữ một số văn bản.
1 2 3 4 5 6 | <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span> <span class="token string">'Hello, World!'</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> TextAlign<span class="token punctuation">.</span>center<span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontWeight<span class="token punctuation">:</span> FontWeight<span class="token punctuation">.</span>bold<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
Văn bản có thể được căn chỉnh bằng cách sử dụng thuộc tính textAlign. Thuộc tính kiểu cho phép tùy chỉnh văn bản bao gồm phông chữ, cỡ chữ, trọng lượng phông chữ, màu sắc, khoảng cách chữ và nhiều thứ khác.
2. Button
Một widget Button cho phép người dùng thực hiện một số hành động khi nhấn. Flutter không có tiện ích trực tiếp “Button” , mà thay vào đó nó có các loại nút như FlatButton và RaisedButton.
1 2 3 4 5 6 7 | <span class="token keyword">new</span> <span class="token class-name">FlatButton</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Click here"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Do something here</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
The FlatButton
Thuộc tính onPressed cho phép một số hành động được thực hiện khi nhấp vào nút.
1 2 3 4 5 6 7 8 | <span class="token keyword">new</span> <span class="token class-name">RaisedButton</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Click here"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> elevation<span class="token punctuation">:</span> <span class="token number">5.0</span><span class="token punctuation">,</span> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Do something here</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
The RaisedButton
Thay đổi elevation của RaisedButton sẽ thay đổi mức độ nổi bật của nó.
3. Image
Tiện ích biểu tượng (icon) là một thùng chứa (container) cho một biểu tượng trong Flutter.
1 2 3 4 5 | <span class="token keyword">new</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span> Icons<span class="token punctuation">.</span>add<span class="token punctuation">,</span> size<span class="token punctuation">:</span> <span class="token number">36.0</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
Nó cũng chứa một thuộc tính kích thước để phóng to biểu tượng.
Cấu trúc và căn chỉnh Widgets
1. Column
Column là một widget sắp xếp tất cả các widget con của nó trong một ngăn xếp dọc. Nó có thể khoảng trống các widget theo thuộc tính mainAxisAlocation và crossAxisAlocation. Ở đây, trục chính main axis của đường trục chính là một trục dọc và trục chính của trục là một trục ngang.
1 2 3 4 5 6 7 8 9 | <span class="token function">Column</span><span class="token punctuation">(</span> mainAxisAlignment<span class="token punctuation">:</span> MainAxisAlignment<span class="token punctuation">.</span>center<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token operator"><</span>Widget<span class="token operator">></span><span class="token punctuation">[</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 1"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 2"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 3"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
Cột có 3 widget văn bản bên trong nó và mainAxisAlocation được đặt thành center.
Đây, nó trông như thế nào:
Do mainAxisAlocation là trung tâm, nó tập trung tất cả các widget. Hãy để thử một cái gì đó khác spaceBetween
Bây giờ chúng cách nhau quá xa, hãy để thử dùng spaceEvenly.
Để đặt nó ở giữa bên trái và bên phải của màn hình, bạn phải sử dụng crossAxisAlocation.
2. Row
1 2 3 4 5 6 7 8 9 | <span class="token function">Row</span><span class="token punctuation">(</span> mainAxisAlignment<span class="token punctuation">:</span> MainAxisAlignment<span class="token punctuation">.</span>spaceEvenly<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token operator"><</span>Widget<span class="token operator">></span><span class="token punctuation">[</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 1"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 2"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 3"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
Một hàng giống như một cột nhưng xây dựng một hàng vật dụng nằm ngang thay vì một cột. Sự khác biệt chính ở đây là trục chính là trục ngang chứ không phải trục dọc. Trục chéo là trục dọc.
3. Center
Một widget Trung tâm chỉ đơn giản là tập trung vào child bên trong nó. Tất cả các ví dụ trước bao gồm các hàng và cột nằm trong một widget Center. Nếu không nằm trong Center, nó sẽ dịch chuyển sang trái. Dưới đây là một ví dụ:
Column không có Center widget
Column có Center widget
1 2 3 4 5 6 7 8 9 10 11 | <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Column</span><span class="token punctuation">(</span> mainAxisAlignment<span class="token punctuation">:</span> MainAxisAlignment<span class="token punctuation">.</span>spaceEvenly<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token operator"><</span>Widget<span class="token operator">></span><span class="token punctuation">[</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 1"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 2"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Element 3"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
Một widget trung tâm chỉ đơn giản là đưa một đứa trẻ và tập trung nó vào không gian có sẵn.
4. Padding
Không giống như trong phát triển Android thông thường nơi mọi chế độ xem có thuộc tính padding riêng, padding là một widget bao bọc các widget khác để cung cấp cho chúng phần padding theo tất cả hoặc các hướng được chỉ định. Điều này cung cấp cho widget văn bản một phần đệm 8.0 theo mọi hướng.
1 2 3 4 5 6 7 | <span class="token function">Padding</span><span class="token punctuation">(</span> padding<span class="token punctuation">:</span> <span class="token keyword">const</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">8.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span> <span class="token string">"Element 1"</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
Padding theo hướng cụ thể cũng được cho phép.
1 2 3 4 5 6 7 | <span class="token function">Padding</span><span class="token punctuation">(</span> padding<span class="token punctuation">:</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">8.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span> <span class="token string">"Element 1"</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> |
5. Scaffold
Widget Scaffold là một khung để thêm các yếu tố thiết kế widget phổ biến như AppBars, Drawers, Floating Action Buttons, Bottom Navigation, etc.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">new</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span> appBar<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>widget<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> floatingActionButton<span class="token punctuation">:</span> <span class="token function">FloatingActionButton</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span><span class="token function">Icon</span><span class="token punctuation">(</span>Icons<span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> |
6. Stack
Một Stack được sử dụng để chồng lấp các widget, giống như một nút trên gradient nền. Stack là một widget rất quan trọng và chúng ta sẽ đi sâu vào chi tiết hơn trong một bài viết trong tương lai.
Đây là những widgets cơ bản cần có để tạo ra một ứng dụng hoạt động tốt trong Flutter. Flutter cũng cho phép bạn tạo các widget của riêng mình nếu bạn cần thêm bất kỳ chức năng nào khác hoặc nếu bạn muốn sử dụng lại một số mẫu widget lặp lại.
Để biết danh sách đầy đủ các tiện ích Flutter, hãy truy cập liên kết này.
Thank for reading!