GridView là một phần tử điều khiển đồ họa được sử dụng để hiển thị các mục ở dạng bảng. Trong phần này, chúng ta sẽ tìm hiểu cách hiển thị các mục trong chế độ xem lưới trong ứng dụng Flutter.
GridView là một widget trong Flutter hiển thị các mục trong mảng 2-D (hàng và cột hai chiều). Như tên cho thấy, nó sẽ được sử dụng khi chúng ta muốn hiển thị các mục trong Grid. Chúng ta có thể chọn mục mong muốn từ danh sách lưới bằng cách chạm vào chúng. Widget này có thể chứa văn bản, hình ảnh, biểu tượng, v.v. để hiển thị trong bố cục lưới tùy thuộc vào yêu cầu của người dùng. Nó cũng được gọi là một mảng vật dụng 2-D có thể cuộn được. Vì nó có thể cuộn được, chúng ta chỉ có thể chỉ định hướng mà nó cuộn.
Chế độ xem lưới hoàn toàn có thể được tiến hành theo nhiều cách khác nhau, được đưa ra dưới đây :
- count()
- builder()
- custom()
- extent()
Chúng ta cùng bàn luận chi tiết cụ thể về tổng thể những điều trên .
Tóm Tắt
1. GridView. count ( )
Đây là cách bố trí lưới được sử dụng thường xuyên nhất trong Flutter vì ở đây, chúng ta đã biết kích thước của lưới. Nó cho phép các nhà phát triển chỉ định số lượng hàng và cột cố định. GriedView.count() chứa các thuộc tính sau:
crossAxisCount: Nó được sử dụng để chỉ định số lượng cột trong chế độ xem lưới.
crossAxisSpacing: Nó được sử dụng để chỉ định số lượng pixel giữa mỗi widget con được liệt kê trong trục chéo.
mainAxisSpacing: Nó được sử dụng để chỉ định số lượng pixel giữa mỗi widget con được liệt kê trong trục chính.
padding (EdgeInsetsGeometry): Nó được sử dụng để chỉ định không gian xung quanh toàn bộ danh sách các widget.
scrollDirection: Nó được sử dụng để chỉ định hướng mà các mục trên GridView cuộn. Theo mặc định, nó cuộn theo hướng thẳng đứng.
reverse: Nếu true, nó sẽ đảo ngược danh sách theo hướng ngược lại dọc theo trục chính.
physics: Nó được sử dụng để xác định cách danh sách hoạt động khi người dùng đến cuối hoặc đầu widget con trong khi cuộn.
shrinkWrap: Nếu nó là false, danh sách có thể cuộn sẽ chiếm nhiều không gian hơn để cuộn theo hướng cuộn. Nó không tốt vì nó gây lãng phí bộ nhớ và làm giảm hiệu suất của ứng dụng. Do đó, chúng ta sẽ bọc các widget con của chúng ta bằng cách sử dụng co lại bằng cách đặt nó thành true để tránh rò rỉ bộ nhớ trong khi cuộn.
1.1 Thí dụ
Hãy để chúng ta hiểu nó với một ví dụ để xem cách tạo GridView trong Flutter để tạo danh sách lưới. Đầu tiên, hãy tạo một dự án mới trong IDE mà bạn đang sử dụng. Mở dự án, điều hướng đến thư mục lib và thay thế code bên dưới bằng tệp main.dart .
import 'package:flutter/material.dart';
void main() {runApp(MyApp());}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(appBar: AppBar(
title: Text("Flutter GridView Demo"),
),
body: GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 8.0,
children: List.generate(choices.length, (index) {
return Center(
child: SelectCard(choice: choices[index]),
);
}
)
)
)
);
}
}
class Choice {
const Choice({this.title, this.icon});
final String title;
final IconData icon;
}
const List choices = const [
const Choice(title: 'Home', icon: Icons.home),
const Choice(title: 'Contact', icon: Icons.contacts),
const Choice(title: 'Map', icon: Icons.map),
const Choice(title: 'Phone', icon: Icons.phone),
const Choice(title: 'Camera', icon: Icons.camera_alt),
const Choice(title: 'Setting', icon: Icons.settings),
const Choice(title: 'Album', icon: Icons.photo_album),
const Choice(title: 'WiFi', icon: Icons.wifi),
];
class SelectCard extends StatelessWidget {
const SelectCard({Key key, this.choice}) : super(key: key);
final Choice choice;
@override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.display1;
return Card(
color: Colors.orange,
child: Center(child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)),
Text(choice.title, style: textStyle),
]
),
)
);
}
} Trong đoạn code trên, tất cả chúng ta đã tạo một lớp cho những mục mà tất cả chúng ta muốn hiển thị trong lưới và sau đó thêm 1 số ít tài liệu. Tiếp theo, tất cả chúng ta đã thiết kế xây dựng widget mà tất cả chúng ta sẽ hiển thị trong GridView .
Đầu ra
Khi chạy ứng dụng trong Android Studio, tất cả chúng ta hoàn toàn có thể thấy màn hình hiển thị sau trong Trình mô phỏng của mình .
2. GridView. builder ( )
Thuộc tính này được sử dụng khi chúng ta muốn hiển thị dữ liệu động hoặc theo yêu cầu. Nói cách khác, nếu người dùng muốn tạo một lưới với số lượng lớn (vô hạn) con, thì họ có thể sử dụng hàm tạo GridView.builder() với SliverGridDelegateWithFixedCrossAxisCount hoặc SliverGridDelegateWithMaxCrossAxisExtent.
Xem thêm: medium tiếng Anh là gì?
Các thuộc tính chung của widget con này là :
itemCount : Nó được sử dụng để xác định lượng dữ liệu sẽ được hiển thị.
gridDelegate : Nó xác định lưới hoặc dải phân cách của nó. Đối số của nó không được rỗng.
itemBuilder : Nó được sử dụng để tạo các mục sẽ được hiển thị trên GridView. Nó sẽ chỉ được gọi khi các chỉ số> = zero && indices
2.1 Thí dụ
Hãy để chúng ta hiểu nó với sự trợ giúp của một ví dụ. Mở dự án, điều hướng đến thư mục lib và thay thế code bên dưới bằng tệp main.dart .
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
List images = [
"https://static.cafedev.vn/tutorial/flutter/images/flutter-logo.png",
"https://static.cafedev.vn/tutorial/flutter/images/flutter-logo.png",
"https://static.cafedev.vn/tutorial/flutter/images/flutter-logo.png",
"https://static.cafedev.vn/tutorial/flutter/images/flutter-logo.png"
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter GridView Demo"),
backgroundColor: Colors.red,
),
body: Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
itemCount: images.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0
),
itemBuilder: (BuildContext context, int index){
return Image.network(images[index]);
},
)),
),
);
}
} Đầu ra
Khi chạy ứng dụng trong Android Studio, tất cả chúng ta hoàn toàn có thể thấy màn hình hiển thị sau trong Trình mô phỏng của mình .
3. GridView. extent ( )
Thuộc tính này được sử dụng khi chúng ta muốn tạo lưới với các giá trị mức tùy chỉnh. Nó có nghĩa là mỗi ô có phạm vi trục chéo tối đa.
3.1 Thí dụ
Hãy để chúng ta hiểu nó với sự trợ giúp của một ví dụ. Mở dự án, điều hướng đến thư mục lib và thay thế code bên dưới bằng tệp main.dart .
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyGridScreen(),
);
}
}
class MyGridScreen extends StatefulWidget {
MyGridScreen({Key key}) : super(key: key);
@override
_MyGridScreenState createState() => _MyGridScreenState();
}
class _MyGridScreenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter GridView Demo"),
backgroundColor: Colors.green,
),
body: Center(
child: GridView.extent(
primary: false,
padding: const EdgeInsets.all(16),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 200.0,
children: [
Container(
padding: const EdgeInsets.all(8),
child: const Text('First', style: TextStyle(fontSize: 20)),
color: Colors.yellow,
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Second', style: TextStyle(fontSize: 20)),
color: Colors.blue,
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Third', style: TextStyle(fontSize: 20)),
color: Colors.blue,
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Four', style: TextStyle(fontSize: 20)),
color: Colors.yellow,
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Fifth', style: TextStyle(fontSize: 20)),
color: Colors.yellow,
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Six', style: TextStyle(fontSize: 20)),
color: Colors.blue,
),
],
)),
);
}
} Đầu ra
Khi chạy ứng dụng trong Android Studio, tất cả chúng ta hoàn toàn có thể thấy màn hình hiển thị sau trong Trình mô phỏng của mình .
Cài ứng dụng cafedev để dễ dàng cập nhật tin và học lập trình mọi lúc mọi nơi tại đây.
Tài liệu từ cafedev:
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!
Source: https://final-blade.com
Category: Kiến thức Internet
