文章目录

• 一、Image 组件
• 二、TextField 组件
• 三、 相关资源

一、Image 组件

---

Image 组件有多个命名构造函数 , 可以从 文件 / 内存 / 网络 / Assets 中加载文件 , 分别对应不同的构造函数 ;

class Image extends StatefulWidget {// 从网络中加载图片的构造函数 Image.network(// 图片的网络地址String src, {Key key,double scale = 1.0,this.frameBuilder,this.loadingBuilder,this.errorBuilder,this.semanticLabel,this.excludeFromSemantics = false,this.width, // 组件宽度this.height, // 组件高度this.color,this.colorBlendMode,this.fit,this.alignment = Alignment.center,this.repeat = ImageRepeat.noRepeat,this.centerSlice,this.matchTextDirection = false,this.gaplessPlayback = false,this.filterQuality = FilterQuality.low,this.isAntiAlias = false,Map<String, String> headers,int cacheWidth,int cacheHeight,}) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, NetworkImage(src, scale: scale, headers: headers)),assert(alignment != null),assert(repeat != null),assert(matchTextDirection != null),assert(cacheWidth == null || cacheWidth > 0),assert(cacheHeight == null || cacheHeight > 0),assert(isAntiAlias != null),super(key: key);// 从文件中加载图片的构造函数 Image.file(File file, {Key key,double scale = 1.0,this.frameBuilder,this.errorBuilder,this.semanticLabel,this.excludeFromSemantics = false,this.width,this.height,this.color,this.colorBlendMode,this.fit,this.alignment = Alignment.center,this.repeat = ImageRepeat.noRepeat,this.centerSlice,this.matchTextDirection = false,this.gaplessPlayback = false,this.isAntiAlias = false,this.filterQuality = FilterQuality.low,int cacheWidth,int cacheHeight,}) : image = ResizeImage.resizeIfNeeded(cacheWidth, cacheHeight, FileImage(file, scale: scale)),loadingBuilder = null,assert(alignment != null),assert(repeat != null),assert(filterQuality != null),assert(matchTextDirection != null),assert(cacheWidth == null || cacheWidth > 0),assert(cacheHeight == null || cacheHeight > 0),assert(isAntiAlias != null),super(key: key);// 从 Assets 资源文件中加载图片Image.asset()// 从内存中加载图片的构造函数Image.memory()}

图片组件使用示例 :

// 图片组件 , 从网络中加载一张图片Image.network(// 图片地址"https://img-blog.csdnimg.cn/20210228180808133.png",// 图片宽度width: 200,// 图片高度height: 200,),

完整代码示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('StatefulWidgetPage 组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},// 条目items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// 设置悬浮按钮floatingActionButton: FloatingActionButton(onPressed: (){print("悬浮按钮点击");},child: Text("悬浮按钮组件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器组件RefreshIndicator(// 显示的内容child: ListView(children: <Widget>[Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡, 下拉刷新"),// 图片组件 , 从网络中加载一张图片Image.network(// 图片地址"https://img-blog.csdnimg.cn/20210228180808133.png",// 图片宽度width: 200,// 图片高度height: 200,),],),),],),// 刷新时回调的方法// 列表发生下拉操作时, 回调该方法// 该回调是 Future 类型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("设置页面选项卡")],),) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符),);}/// RefreshIndicator 发生下拉操作时, 回调该方法/// 该方啊是一个异步方法 , 在方法体前添加 async 关键字Future<Null> _refreshIndicatorOnRefresh() async{// 暂停 500 ms , 使用 await 关键字实现// 在这 500 ms 之间 , 列表处于刷新状态// 500 ms 之后 , 列表变为非刷新状态await Future.delayed(Duration(milliseconds: 500));return null;}}

运行效果展示 :

二、TextField 组件

---

TextField 组件构造函数的可选参数 : 下面代码中的可选参数就是 TextField 组件可以设置的参数选项 ;

class TextField extends StatefulWidget {const TextField({Key key,this.controller,this.focusNode,this.decoration = const InputDecoration(),TextInputType keyboardType,this.textInputAction,this.textCapitalization = TextCapitalization.none,this.style,this.strutStyle,this.textAlign = TextAlign.start,this.textAlignVertical,this.textDirection,this.readOnly = false,ToolbarOptions toolbarOptions,this.showCursor,this.autofocus = false,this.obscuringCharacter = '•',this.obscureText = false,this.autocorrect = true,SmartDashesType smartDashesType,SmartQuotesType smartQuotesType,this.enableSuggestions = true,this.maxLines = 1,this.minLines,this.expands = false,this.maxLength,this.maxLengthEnforced = true,this.onChanged,this.onEditingComplete,this.onSubmitted,this.onAppPrivateCommand,this.inputFormatters,this.enabled,this.cursorWidth = 2.0,this.cursorHeight,this.cursorRadius,this.cursorColor,this.selectionHeightStyle = ui.BoxHeightStyle.tight,this.selectionWidthStyle = ui.BoxWidthStyle.tight,this.keyboardAppearance,this.scrollPadding = const EdgeInsets.all(20.0),this.dragStartBehavior = DragStartBehavior.start,this.enableInteractiveSelection = true,this.onTap,this.mouseCursor,this.buildCounter,this.scrollController,this.scrollPhysics,this.autofillHints,this.restorationId,}) }

输入框组件代码示例 :

// 输入框组件TextField(// 设置输入框样式decoration: InputDecoration(// 设置内容边距, 左右边距为 10, 上下边距为 0contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),// 设置的提示文案信息hintText: "提示信息",// 设置提示文案样式hintStyle: TextStyle(fontSize: 20, color: Colors.grey),),

完整代码示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('StatefulWidgetPage 组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},// 条目items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// 设置悬浮按钮floatingActionButton: FloatingActionButton(onPressed: (){print("悬浮按钮点击");},child: Text("悬浮按钮组件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器组件RefreshIndicator(// 显示的内容child: ListView(children: <Widget>[Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡, 下拉刷新"),// 图片组件 , 从网络中加载一张图片Image.network(// 图片地址"https://img-blog.csdnimg.cn/20210228180808133.png",// 图片宽度width: 200,// 图片高度height: 200,),// 输入框组件TextField(// 设置输入框样式decoration: InputDecoration(// 设置内容边距, 左右边距为 10, 上下边距为 0contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),// 设置的提示文案信息hintText: "提示信息",// 设置提示文案样式hintStyle: TextStyle(fontSize: 20, color: Colors.grey),),)],),),],),// 刷新时回调的方法// 列表发生下拉操作时, 回调该方法// 该回调是 Future 类型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("设置页面选项卡")],),) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符),);}/// RefreshIndicator 发生下拉操作时, 回调该方法/// 该方啊是一个异步方法 , 在方法体前添加 async 关键字Future<Null> _refreshIndicatorOnRefresh() async{// 暂停 500 ms , 使用 await 关键字实现// 在这 500 ms 之间 , 列表处于刷新状态// 500 ms 之后 , 列表变为非刷新状态await Future.delayed(Duration(milliseconds: 500));return null;}}

运行效果展示 :

三、 相关资源

---

参考资料 :

• Flutter 官网 : https://flutter.dev/
• Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社区 : https://flutter.cn/
• Flutter 实用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文档 : https://dart.cn/
• Dart 开发者官网 : https://api.dart.dev/
• Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )

• 博客源码快照 : https://download.csdn.net/download/han1202012/15500147 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

总结

以上是生活随笔为你收集整理的【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。