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

  1. TextEditingController 编辑框控制器,设置,获取,选择,监听文本改变事件。
  2. FucusNode 是否占有键盘焦点。
  3. InputDecoration TextField外观显示,提示文本,背景颜色,边框等。
  4. 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,
)
],
)

效果
image

控制焦点
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,
)
),
],
),
);
}
}
posted @   西北野狼  阅读(46)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
历史上的今天:
2017-02-11 activity 与 service 之间的通信
2014-02-11 图片异步加载框架 Android-Universal-Image-Loader
2014-02-11 java.lang.InstantiationException: can't instantiate class com.jtd.service.Service$InsideService; no empty constructor异常的处理
点击右上角即可分享
微信分享提示