图片和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'; |
| |
| 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 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{ |
| |
| 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, |
| ) |
| ), |
| |
| ], |
| ), |
| ); |
| } |
| } |
| |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的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异常的处理