Hộp kiểm là thành phần giao diện đồ họa người dùng (GUI) cho phép người dùng thực hiện lựa chọn nhị phân, tức là lựa chọn giữa một trong hai tùy chọn có thể loại trừ lẫn nhau. Ví dụ: người dùng có thể phải trả lời "có" hoặc "không" cho một câu hỏi có/không đơn giản.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thêm hộp kiểm, hộp kiểm có nhãn và làm cho nó có thể chuyển đổi khi nhấp vào nhãn trong Flutter. Hộp kiểm là thành phần quan trọng đối với bất kỳ loại biểu mẫu nào. Xem ví dụ dưới đây:
bool? check1 = false; //true for checked checkbox, false for unchecked one
Checkbox( //only check box
value: check1, //unchecked
onChanged: (bool? value){
//value returned when checkbox is clicked
setState(() {
check1 = value;
});
}
)
Tại đây, bạn sẽ chỉ nhận được một hộp kiểm có trạng thái không được chọn.
bool? check2 = true,;
CheckboxListTile( //checkbox positioned at right
value: check2,
onChanged: (bool? value) {
setState(() {
check2 = value;
});
},
title: Text("Do you really want to learn Flutter?"),
)
Tại đây, bạn sẽ có một hộp kiểm có nhãn nhưng trạng thái của hộp kiểm sẽ chỉ thay đổi khi bạn nhấn vào đó. Nhãn không thể nhấp được.
bool? check3 = false;
CheckboxListTile(
value: check3,
controlAffinity: ListTileControlAffinity.leading, //checkbox at left
onChanged: (bool? value) {
setState(() {
check3 = value;
});
},
title: Text("Do you really want to learn Flutter?"),
)
Tại đây, bạn sẽ có một hộp kiểm có nhãn có thể nhấp vào.
bool? check1 = false;
Checkbox(
value: check1, //set variable for value
onChanged: (bool? value){
setState(() {
check1 = value;
});
}
)
if(check1!){
//checkbox is checked
}else{
//checkbox is not checked
}
Bằng cách này, bạn có thể thêm hộp kiểm trong ứng dụng Flutter.