Flutter笔记-基础组件
图片和Icon
加载网络图片以及本地图片
Image(
image: NetworkImage(
"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB12IU4R.img?w=80&h=80&m=4&q=60"),
width: 100.0,
),
Image(image: AssetImage("graphics/ic_launcher.png"),
width: 100.0,
height: 100.0,
)
color和colorBlendMode 进行颜色混合处理
Image(
image: AssetImage("graphics/ic_launcher.png"),
width: 100.0,
height: 100.0,
color: Colors.blue,
colorBlendMode: BlendMode.difference,
)
整体的例子：
加载网络图片
import 'package:flutter/cupertino.dart';
class ImageAndIconRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
var assetImage = AssetImage("graphics/ic_launcher.png");
return SingleChildScrollView(
child: Column(
children: <Image>[
Image(
image: assetImage,
width: 100,
height: 100,
fit: BoxFit.fill,
),
Image(
image: assetImage,
width: 100,
height: 100,
fit: BoxFit.contain,
),
Image(
image: assetImage,
width: 100,
height: 100,
fit: BoxFit.cover,
),
Image(
image: assetImage,
width: 100,
height: 100,
fit: BoxFit.fitWidth,
),
Image(
image: assetImage,
width: 100,
height: 100,
fit: BoxFit.fitHeight,
),
Image(
image: assetImage,
width: 100,
height: 100,
fit: BoxFit.none,
),
].map((e) {
return Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(16.0),
child: SizedBox(
width: 100,
child: e,
),
),
Text(e.fit.toString())
],
);
}).toList()),
);
}
}
单选开关和复选框
switch和checkbox,继承StateLessWidget
点击switch和checkbox会触发onchange回调
import 'package:flutter/material.dart';
// StatefulWidget 维护状态需要继承这个
class SwitchAndCheckboxRoute extends StatefulWidget{
const SwitchAndCheckboxRoute({super.key});
@override
SwitchAndCheckboxRouteSate createState() => SwitchAndCheckboxRouteSate();
}
class SwitchAndCheckboxRouteSate extends State<SwitchAndCheckboxRoute>{
bool switchSelected = true;
bool checkboxSelected = true;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Switch(
value:switchSelected, onChanged: (bool value) {
setState(() {
switchSelected = value;
});
},),
Checkbox(value: checkboxSelected,
activeColor: Colors.red,
onChanged: (bool? value) {
setState(() {
checkboxSelected = value!;
});
},
)
],
);
}
}
输入框以及表单
输入框组件TextField
- TextEditingController 编辑框控制器，设置，获取，选择，监听文本改变事件。
- FucusNode 是否占有键盘焦点。
- InputDecoration TextField外观显示，提示文本，背景颜色，边框等。
- KeyboardType 键盘输入类型
- text 文件输入键盘
- multiline 多行文本
- number 数字键盘
- phone 电话号码键盘
- datatime 日期输入键盘
- emailAddress 电子邮件
- url url输入键盘
输入框例子：
Column(
children: const <Widget>[
TextField(
autofocus: true,
decoration: InputDecoration(
labelText: "用户名",
hintText: "请输入用户名",
prefixIcon: Icon(Icons.person)
),
),
TextField(
autofocus: true,
decoration: InputDecoration(
labelText: "密码",
hintText: "请输入密码",
prefixIcon: Icon(Icons.lock)
),
obscureText: true,
)
],
)
效果
控制焦点
import 'package:flutter/material.dart';
class FocusTestRoute extends StatefulWidget{
const FocusTestRoute({super.key});
@override
FocusTestRouteState createState()=>FocusTestRouteState();
}
class FocusTestRouteState extends State<FocusTestRoute>{
// FocusNode 控制焦点用
FocusNode focusNode1 = FocusNode();
FocusNode focusNode2 = FocusNode();
// 移动焦点，设置默认焦点用
late FocusScopeNode focusScopeNode;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
TextField(
autofocus: true,
focusNode: focusNode1,
decoration: const InputDecoration(
labelText: "input1"
),
),
TextField(
focusNode: focusNode2,
decoration: const InputDecoration(
labelText: "input2"
),
),
Builder(builder: (ctx){
return Column(
children: <Widget>[
TextButton(
child: const Text("移动焦点"),
onPressed: (){
if(null==focusScopeNode){
focusScopeNode = FocusScope.of(context);
}else{
// 焦点移动到第二个TextField
focusScopeNode.requestFocus(focusNode2);
}
},
),
TextButton(
child: const Text("隐藏键盘"),
onPressed: (){
focusNode1.unfocus();
focusNode2.unfocus();
},
)
],
);
})
],
),
);
}
}
进度条
LinearProgressIndicator 横向进度条
valueColor 进度条颜色
value 进度
LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: const AlwaysStoppedAnimation(Colors.blue),
),
LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: const AlwaysStoppedAnimation(Colors.blue),
value: 0.5,
)
圆形进度条
CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: const AlwaysStoppedAnimation(Colors.blue),
value: .5,
)
指定进度条宽高SizedBox
SizedBox(
height: 10,
child: LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: const AlwaysStoppedAnimation(Colors.blue),
),
),
10s由绿变红例子
import 'package:flutter/material.dart';
class ProgressRoute extends StatefulWidget {
const ProgressRoute({super.key});
@override
ProgressRouteState createState() => ProgressRouteState();
}
class ProgressRouteState extends State<ProgressRoute>
with SingleTickerProviderStateMixin {
late AnimationController animationController;
@override
initState() {
animationController =
AnimationController(vsync: this, duration: const Duration(seconds: 10));
animationController.forward();
animationController.addListener(() => setState(() {}));
super.initState();
}
@override
void dispose() {
animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(padding: const EdgeInsets.all(16),
child: LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: ColorTween(begin: Colors.green, end: Colors.red).animate(animationController),
value: animationController.value,
)
),
],
),
);
}
}
