Hướng dẫn và ví dụ Flutter IconButton
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, IconButton là một button với một biểu tượng (Icon), người dùng có thể click vào nó để thực hiện một hành động. IconButton sẽ không bao gồm nội dung văn bản, nếu bạn muốn có một button bao gồm biểu tượng và văn bản hãy sử dụng FlatButton hoặc RaisedButton.
IconButton Constructor:
IconButton Contructor
const IconButton (
{Key key,
double iconSize: 24.0,
VisualDensity visualDensity,
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),
AlignmentGeometry alignment: Alignment.center,
double splashRadius,
@required Widget icon,
Color color,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Color disabledColor,
@required VoidCallback onPressed,
MouseCursor mouseCursor: SystemMouseCursors.click,
FocusNode focusNode,
bool autofocus: false,
String tooltip,
bool enableFeedback: true,
BoxConstraints constraints}
)
IconButton thường được sử dụng như một action trong property AppBar.actions, nó cũng được sử dụng trong nhiều tình huống khác.
Vùng tương tác (hit region) của IconButton là vùng có thể cảm nhận được sự tương tác của người dùng, nó có kích thước nhỏ nhất là kMinInteractiveDimension (48.0) bất kể kích thước thực sự của Icon là thế nào.
Property icon được sử dụng để chỉ định một biểu tượng (icon) cho IconButton.
@required Widget icon
main.dart (icon ex1)
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(
title: 'Title of Application',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("IconButton Example"),
),
body: Center(
child: IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
}
)
),
);
}
}
Bạn có thể gán một đối tượng Widget bất kỳ cho property IconButton.icon, nhưng nó nên chứa một biểu tượng (icon) hoặc hình ảnh (image), các trường hợp khác là không phù hợp với mục tiêu thiết kế của IconButton.
ImageButton - icon (ex2)
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
onPressed: () {
print("Pressed");
}
)
Hãy xem điều gì xẩy ra nếu IconButton.icon là một đối tượng Text?
ImageButton - icon (ex3)
IconButton (
icon: Text("???????????"),
onPressed: () {
print("Pressed");
}
)
- TODO Link?
Property iconSize được sử dụng để chỉ định kích thước của biểu tượng (icon), giá trị mặc định của nó là 24. Nếu kích thước thực sự của icon lớn hơn iconSize nó sẽ bị co lại bằng iconSize khi hiển thị, ngược lại kích thước hiển thị của icon sẽ không thay đổi.
double iconSize: 24.0
Ví dụ:
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
onPressed: () {
print("Pressed");
},
iconSize: 96
)
Vùng tương tác (Hit region) của IconButton là vùng cảm nhận được sự tương tác của người dùng, chẳng hạn click. Giá trị của iconSize càng lớn thì vùng tương tác cũng càng lớn, bất kể kích thước thực sự của icon là như thế nào. Tuy nhiên vùng tương tác sẽ có kích thước nhỏ nhất là kMinInteractiveDimension (48.0) để đảm bảo rằng nó không quá bé đối với người dùng để có thể tương tác.
Nếu kích thước thực sự của icon lớn hơn iconSize thì nó sẽ bị co lại bằng với iconSize khi hiển thị.
main.dart (iconSize ex1)
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(
title: 'Title of Application',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("IconButton Example"),
),
body: Center(
child: getIconButtons()
),
);
}
Widget getIconButtons() {
double MAX_SIZE = 96;
double LEFT = 30;
return Center(
child: Column (
children: [
Row (
children: [
SizedBox(width: LEFT),
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_96.png"),
onPressed: () {
print("Pressed");
},
iconSize: MAX_SIZE,
),
Text("Real Size: 96"),
Text(" --- "),
Text("Set iconSize: " + MAX_SIZE.toString()),
]
),
Row (
children: [
SizedBox(width: LEFT),
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_72.png"),
onPressed: () {
print("Pressed");
},
iconSize: MAX_SIZE,
),
Text("Real Size: 72"),
Text(" --- "),
Text("Set iconSize: " + MAX_SIZE.toString()),
]
),
Row (
children: [
SizedBox(width: LEFT),
IconButton (
icon: Image.network("https://raw.githubusercontent.com/o7planning/rs/master/flutter/feel_good_24.png"),
onPressed: () {
print("Pressed");
},
iconSize: MAX_SIZE,
),
Text("Real Size: 24"),
Text(" --- "),
Text("Set iconSize: " + MAX_SIZE.toString()),
]
),
])
);
}
}
onPressed là một hàm callback sẽ được gọi khi người dùng nhấn xuống IconButton. Nếu onPressed không được chỉ định IconButton sẽ bị vô hiệu hóa (disabled), không có phản ứng gì khi người dùng nhấp vào nó.
@required VoidCallback onPressed;
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
}
)
// Or:
Function onPressedHandler = () {
print("Pressed");
};
....
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: onPressedHandler
)
Ví dụ:
main.dart (onPressed ex2)
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(
title: 'Title of Application',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return MyHomePageState();
}
}
class MyHomePageState extends State<MyHomePage> {
int clickCount = 0;
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("IconButton Example. Click count: " + this.clickCount.toString()),
),
body: IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
setState(() {
this.clickCount++;
});
}
)
);
}
}
Property color chỉ định mầu sắc cho icon bên trong IconButton khi IconButton này đang trong trạng thái thông thường (Enabled).
Color color
color (ex1)
IconButton (
icon: Icon(Icons.directions_boat),
onPressed: () {
print("Pressed");
},
iconSize: MAX_SIZE,
color: Colors.blue,
),
Property disabledColor chỉ định mầu sắc cho icon bên trong IconButton khi IconButton này đang trong trạng thái bị vô hiệu hóa (disabled). Một IconButton sẽ ở trong trạng thái bị vô hiệu hóa nếu onPressed là null hoặc không được chỉ định.
Color disabledColor
disabledColor (ex1)
IconButton (
icon: Icon(Icons.directions_boat),
iconSize: 64
disabledColor: Colors.black45,
),
Property splashRadius chỉ định bán kính của chớp sáng bao quanh IconButton khi người dùng nhấn xuống IconButton. Giá trị mặc định của nó là defaultSplashRadius (35).
double splashRadius
splashRadius (ex1)
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
},
splashRadius: 50,
)
Property splashColor chỉ định mầu sắc chính (primary color) của chớp sáng bao quanh vị trí mà người dùng nhấn xuống (press down) IconButton.
Color splashColor
splashColor (ex1)
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
},
splashRadius: 100,
splashColor: Colors.lightGreenAccent
)
Property splashColor chỉ định mầu sắc phụ (secondary color) của chớp sáng bao quanh vị trí mà người dùng nhấn xuống (press down) IconButton.
Color highlightColor
highlightColor (ex1)
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
},
splashRadius: 100,
splashColor: Colors.blue,
highlightColor: Colors.red,
),
Color hoverColor
Color focusColor
Property tooltip là một văn bản mô tả về IconButton, nó sẽ xuất hiện khi người dùng nhấp vào IconButton này.
String tooltip
tooltip (ex1)
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {
print("Pressed");
},
iconSize: 64,
tooltip: "Bus Direction",
)
FocusNode focusNode
- TODO Link?
bool autofocus: false
bool enableFeedback: true
VisualDensity visualDensity;
- TODO Link?
Property padding được sử dụng để thiết lập khoảng không gian nằm trong viền và bao quanh nội dung của button.
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0)
padding (ex1)
IconButton (
icon: Icon(Icons.directions_bus),
onPressed: () {},
color: Colors.blue,
padding: EdgeInsets.all(10)
)
IconButton (
icon: Icon(Icons.directions_car),
onPressed: () {},
color: Colors.blue,
padding: EdgeInsets.fromLTRB(50, 10, 30, 10)
)
AlignmentGeometry alignment: Alignment.center
BoxConstraints constraints
MouseCursor mouseCursor: SystemMouseCursors.click
- TODO Link?
