Lập trình Flutter

Flutter – Giới thiệu về Widget

Đăng vào bởi Mss. Bình

Như chúng ta đã học trong chương trước, widget là tất cả mọi thứ trong Flutter framework. Chúng ta đã học cách tạo widget mới trong các chương trước.

Trong chương này, chúng ta hãy hiểu khái niệm thực tế đằng sau việc tạo tiện ích con và các loại tiện ích con khác nhau có sẵn trong Chớp cánh khuôn khổ.

Hãy để chúng tôi kiểm tra Chào thế giới các ứng dụng MyHomePage tiện ích con. Mã cho mục đích này như được đưa ra bên dưới:

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar(title: Text(this.title), ), 
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

Ở đây, chúng tôi đã tạo một tiện ích con mới bằng cách mở rộng StatelessWidget.

Lưu ý rằng StatelessWidget chỉ yêu cầu một phương pháp duy nhất xây dựng được thực hiện trong lớp dẫn xuất của nó. Các xây dựng phương thức có được môi trường ngữ cảnh cần thiết để xây dựng các tiện ích con thông qua BuildContext và trả về tiện ích mà nó xây dựng.

Trong mã, chúng tôi đã sử dụng Tiêu đề là một trong những đối số của hàm tạo và cũng được sử dụng Chìa khóa như một lập luận khác. Các Tiêu đề được sử dụng để hiển thị tiêu đề và Chìa khóa được sử dụng để xác định tiện ích con trong môi trường xây dựng.

Đây, xây dựng phương thức gọi xây dựng phương pháp của Khungđến lượt nó, gọi là xây dựng phương pháp của AppBar và Trung tâm đến xây dựng giao diện người dùng của nó.

Cuối cùng, Trung tâm xây dựng các cuộc gọi phương thức Chữ xây dựng phương pháp.

Để hiểu rõ hơn, trình bày trực quan của điều tương tự được đưa ra dưới đây:

Đại diện trực quan

Hình ảnh hóa bản dựng tiện ích

Trong Chớp cánhcác widget có thể được nhóm thành nhiều danh mục dựa trên các tính năng của chúng, như được liệt kê bên dưới –

  • Các tiện ích cụ thể cho nền tảng
  • Bố cục widget
  • Các vật dụng bảo trì trạng thái
  • Các widget cơ bản / độc lập với nền tảng

Hãy để chúng tôi thảo luận chi tiết về từng người trong số họ bây giờ.

Các tiện ích cụ thể cho nền tảng

Flutter có các widget dành riêng cho một nền tảng cụ thể – Android hoặc iOS.

Các widget cụ thể của Android được thiết kế phù hợp với Nguyên tắc thiết kế material design bằng hệ điều hành Android. Các widget cụ thể của Android được gọi là Vật liệu vật liệu.

Các widget cụ thể của iOS được thiết kế phù hợp với Nguyên tắc về giao diện con người của Apple và chúng được gọi là Cupertino vật dụng.

Một số vật liệu vật liệu được sử dụng nhiều nhất như sau:

  • Khung
  • AppBar
  • BottomNavigationBar
  • TabBar
  • TabBarView
  • ListTile
  • RaisedButton
  • FloatingActionButton
  • FlatButton
  • IconButton
  • DropdownButton
  • PopupMenuButton
  • ButtonBar
  • Trương Văn bản
  • Hộp kiểm
  • Đài
  • Công tắc
  • Thanh trượt
  • Bộ chọn ngày & giờ
  • SimpleDialog
  • AlertDialog

Một số được sử dụng nhiều nhất Cupertino các widget như sau:

  • CupertinoButton
  • CupertinoPicker
  • CupertinoDatePicker
  • CupertinoTimerPicker
  • CupertinoNavigationBar
  • CupertinoTabBar
  • CupertinoTabScaffold
  • CupertinoTabView
  • CupertinoTextField
  • CupertinoDialog
  • CupertinoDialogAction
  • CupertinoFullscreenDialogTransition
  • CupertinoPageScaffold
  • CupertinoPageTransition
  • CupertinoActionSheet
  • CupertinoActivityIndicator
  • CupertinoAlertDialog
  • CupertinoPopupSurface
  • CupertinoSlider

Bố cục widget

Trong Flutter, một widget có thể được tạo bằng cách soạn một hoặc nhiều widget. Để tổng hợp nhiều tiện ích con thành một tiện ích con, Chớp cánh cung cấp số lượng lớn các vật dụng với tính năng bố trí. Ví dụ: tiện ích con có thể được căn giữa bằng cách sử dụng Trung tâm tiện ích con.

Một số tiện ích bố cục phổ biến như sau:

  • Thùng đựng hàng – Một hình hộp chữ nhật được trang trí bằng cách sử dụng BoxDecoration vật dụng với nền, đường viền và bóng.

  • Trung tâm – Căn giữa widget con của nó.

  • Hàng ngang – Sắp xếp các con của nó theo chiều ngang.

  • Cột – Sắp xếp các con của nó theo chiều dọc.

  • Cây rơm – Sắp xếp cái này lên trên cái khác.

Chúng tôi sẽ kiểm tra chi tiết các widget bố cục trong thời gian tới Giới thiệu về các widget bố cục chương.

Các vật dụng bảo trì trạng thái

Trong Flutter, tất cả các widget đều có nguồn gốc từ StatelessWidget hoặc StatefulWidget.

Widget có nguồn gốc từ StatelessWidget không có bất kỳ thông tin trạng thái nào nhưng nó có thể chứa tiện ích con bắt nguồn từ StatefulWidget. Bản chất động của ứng dụng là thông qua hành vi tương tác của các vật dụng và trạng thái thay đổi trong quá trình tương tác. Ví dụ: chạm vào nút bộ đếm sẽ tăng / giảm trạng thái bên trong của bộ đếm theo một và tính chất phản ứng của Chớp cánh widget sẽ tự động hiển thị lại widget bằng cách sử dụng thông tin trạng thái mới.

Chúng ta sẽ tìm hiểu khái niệm về StatefulWidget chi tiết các widget trong thời gian tới Chương quản lý nhà nước.

Các widget cơ bản / độc lập với nền tảng

Chớp cánh cung cấp số lượng lớn các widget cơ bản để tạo giao diện người dùng đơn giản cũng như phức tạp theo cách độc lập với nền tảng. Chúng ta hãy xem một số widget cơ bản trong chương này.

Chữ

Chữ widget được sử dụng để hiển thị một đoạn chuỗi. Kiểu của chuỗi có thể được thiết lập bằng cách sử dụng Phong cách tài sản và Phong cách văn bản lớp. Mã mẫu cho mục đích này như sau:

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

Chữ widget có một hàm tạo đặc biệt, Text.richchấp nhận loại con TextSpan để chỉ định chuỗi với kiểu khác nhau. TextSpan widget có bản chất là đệ quy và nó chấp nhận TextSpan như những đứa con của nó. Mã mẫu cho mục đích này như sau:

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Các thuộc tính quan trọng nhất của Chữ widget như sau –

  • maxLines, int – Số dòng tối đa để hiển thị

  • tràn, TextOverFlow – Chỉ định cách xử lý tràn trực quan bằng cách sử dụng TextOverFlow lớp

  • style, TextStyle – Chỉ định kiểu của chuỗi bằng cách sử dụng Phong cách văn bản lớp

  • textAlign, TextAlign – Căn chỉnh văn bản như phải, trái, căn đều, v.v., sử dụng TextAlign lớp

  • textDirection, TextDirection – Hướng dòng chảy của văn bản, từ trái sang phải hoặc từ phải sang trái

Hình ảnh

Hình ảnh widget được sử dụng để hiển thị hình ảnh trong ứng dụng. Hình ảnh widget cung cấp các trình xây dựng khác nhau để tải hình ảnh từ nhiều nguồn và chúng như sau:

  • Hình ảnh – Trình tải hình ảnh chung sử dụng ImageProvider

  • Image.asset – Tải hình ảnh từ tài sản của dự án Flagship

  • Image.file – Tải hình ảnh từ thư mục hệ thống

  • Image.memory – Tải hình ảnh từ bộ nhớ

  • Image.Network – Tải hình ảnh từ mạng

Tùy chọn dễ nhất để tải và hiển thị hình ảnh trong Chớp cánh là bằng cách bao gồm hình ảnh làm tài sản của ứng dụng và tải nó vào tiện ích con theo yêu cầu.

  • Tạo một thư mục, tài sản trong thư mục dự án và đặt các hình ảnh cần thiết.

  • Chỉ định các nội dung trong pubspec.yaml như được hiển thị bên dưới –

flutter: 
   assets: 
      - assets/smiley.png

Image.asset('assets/smiley.png')

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar( title: Text(this.title), ), 
         body: Center( child: Image.asset("assets/smiley.png")),
      ); 
   }
}

Hình ảnh được tải như hình dưới đây –

Đầu ra ứng dụng Hello World

Các thuộc tính quan trọng nhất của Hình ảnh widget như sau –

  • hình ảnh, ImageProvider – Hình ảnh thực tế để tải

  • chiều rộng, gấp đôi – Chiều rộng của hình ảnh

  • chiều cao, gấp đôi – Chiều cao của hình ảnh

  • căn chỉnh, AlignmentGeometry – Cách căn chỉnh hình ảnh trong giới hạn của nó

Biểu tượng

Biểu tượng widget được sử dụng để hiển thị một glyph từ một phông chữ được mô tả trong IconData lớp. Mã để tải một biểu tượng email đơn giản như sau:

Icon(Icons.email)

Mã nguồn hoàn chỉnh để áp dụng nó trong ứng dụng hello world như sau:

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

Biểu tượng được tải như hình dưới đây –

Trang chủ