九江专业制作网站小程序,广东深圳职业技术学院,厦门广告公司电话,广州网站建设外包目标#xff1a;
1#xff09;常用的Widget有哪些#xff1f;有什么特征#xff1f;
2#xff09;开发一个简单的登录页面。
一、Flutter常用Widget
对于Flutter来说#xff0c;一切皆Widget.
常用的Widget#xff0c;包括一些基础功能的Widget.
控件名称功能备注…目标
1常用的Widget有哪些有什么特征
2开发一个简单的登录页面。
一、Flutter常用Widget
对于Flutter来说一切皆Widget.
常用的Widget包括一些基础功能的Widget.
控件名称功能备注Text文本小组件Icon/IconButtonRow水平布局组件Column竖直布局组件StackContainer容器小组件类似层叠式布局EdgeInsets边框小组件用于设置paddingPadding内边距用于设置容器内边距Scaffold脚手架小组件规划页面主要布局位置包括AppBar底部导航栏按钮页面Body等MaterialAppMaterial风格UI入口AppBarMaterial风格AppBar
Flutter Widget列表
https://flutter.cn/docs/reference/widgets 1.1 输入框 TextField
Flutter的输入框是常见的用户界面组件之一用于接收用户的文本输入。对应的组件源码
text_field.dart
controller控制输入框的文本内容可以通过TextEditingController进行管理。decoration输入框的装饰可以定义输入框的边框、背景、提示文本等样式。obscureText是否将输入内容隐藏常用于密码输入框。enabled输入框是否可编辑。maxLength允许输入的最大字符数。textInputAction键盘操作按钮的类型例如完成、继续等。keyboardType键盘的类型如文本、数字、URL等。onChanged文本变化时的回调函数。onSubmitted用户提交输入时的回调函数。focusNode用于控制输入框的焦点获取和失去。autofocus是否自动获取焦点。style输入框文本的样式如字体大小、颜色等。 1. controller属性
controller属性用于控制输入框的文本内容可以通过TextEditingController进行管理。使用TextEditingController可以获取、设置和监听输入框的文本内容。
TextEditingController _textController TextEditingController();TextField(controller: _textController,
);
通过_textController.text来获取或设置输入框中的文本内容。
2. decoration属性
decoration属性用于定义输入框的装饰包括边框、背景、提示文本等样式。它使用InputDecoration类来配置输入框的外观。
TextField(decoration: InputDecoration(border: OutlineInputBorder(),filled: true,fillColor: Colors.grey[200],hintText: Enter your name,hintStyle: TextStyle(color: Colors.grey),prefixIcon: Icon(Icons.person),),
);
3. obscureText属性
obscureText属性用于指定输入框的文本是否应该被隐藏常用于密码输入框。当设置为true时输入的文本将以圆点或其他隐藏字符显示。掩码显示。
TextField(obscureText: true,
);
4. enabled属性-是否可编辑
enabled属性用于指定输入框是否可编辑。当设置为false时输入框将变为只读状态用户无法编辑其中的文本。
5. maxLength属性
maxLength属性用于限制输入框可输入的最大字符数。设置此属性后用户将无法输入超过指定字符数的文本。
TextField(maxLength: 10,
);
6. textInputAction属性
textInputAction属性用于指定键盘操作按钮的类型例如完成、继续等。它们用于控制键盘上右下角按钮的标签和功能。
TextField(textInputAction: TextInputAction.done,
);
7. keyboardType属性
keyboardType属性用于指定键盘的类型例如文本、数字、URL等。根据需要选择适合的键盘类型以提供更好的用户体验。
TextField(keyboardType: TextInputType.emailAddress,
);
8. onChanged和onSubmitted属性
onChanged和onSubmitted属性用于定义输入框文本变化和提交输入的回调函数。onChanged在输入框文本发生变化时被调用而onSubmitted在用户提交输入时被调用。
TextField(onChanged: (value) {// 处理文本变化},onSubmitted: (value) {// 处理提交输入},
);
9. style属性
style属性用于定义输入框文本的样式如字体大小、颜色等。
TextField(style: TextStyle(fontSize: 16.0,color: Colors.black,),
);
1.2 文本框 Text
文本框是Flutter用于显示文本的小组件。
创建函数如下 const Text(String this.data, {Key? key,this.style,this.strutStyle,this.textAlign,this.textDirection,this.locale,this.softWrap,this.overflow,this.textScaleFactor,this.maxLines,this.semanticsLabel,this.textWidthBasis,this.textHeightBehavior,}) : assert(data ! null,A non-null String must be provided to a Text widget.,),textSpan null,super(key: key);
创建函数存在一个非空必选参数String data存储文本内容。其他是一些可选参数。
1. text属性
存储文本
2. key属性 用于识别组件的唯一键。
3. style属性 TextStyle对象用于指定文本的样式例如字体、颜色、大小等。常用的属性配置
color: 文本颜色。fontSize: 字体大小。fontWeight: 字体粗细。fontStyle: 字体样式如斜体。letterSpacing: 字母间距。wordSpacing: 单词间距。background: 文本背景颜色。decoration: 文本修饰如下划线、删除线等。decorationColor: 文本修饰的颜色。decorationStyle: 文本修饰的样式。height: 行高。textBaseline: 基线对齐方式。shadows: 文本阴影效果。
4. textAlign属性
文本对齐方式可以是左对齐left、右对齐right、居中对齐center或两端对齐justify。
5. textDirection属性 文本方向可以是从左到右ltr或从右到左rtl。
6. softWrap属性
softWrap是否自动换行默认为true。
7. overflow属性
文本溢出处理方式可以是省略号ellipsis、截断clip或折叠fade
8. maxLines属性
最大显示行数超过部分将根据overflow属性进行处理。 9. textScaleFactor属性
文本缩放因子用于调整文本大小的比例。 10. locale属性 文本的本地化配置用于支持多语言显示。 11. strutStyle属性
文本行高样式。 12. textWidthBasis属性
文本宽度计算基准可以是parent父容器宽度或 longestLine最长行宽度。 13. textHeightBehavior属性
文本高度行为配置。
1.3 按钮 Button
常用的按钮分类
ElevatedButton: 凸起按钮具有立体效果。TextButton: 文本按钮通常用于文字链接或简单的按钮。OutlinedButton: 带边框的按钮边框颜色可自定义。IconButton: 图标按钮使用图标作为按钮的内容。
1. onPressed属性
点击按钮时触发的回调函数
2. onLongPress属性
长按按钮时触发的回调函数
3. style属性
ButtonStyle对象用于设置按钮的样式。常用属性如下
backgroundColor按钮的背景颜色。【常用】foregroundColor按钮的前景颜色如文字颜色。【常用】elevation按钮的海拔高度用于创建立体效果。padding按钮的内边距。【常用】side按钮的边框样式。shape按钮的形状。【常用】minimumSize按钮的最小尺寸。alignment按钮内容的对齐方式。 ElevatedButton(onPressed: () {// 点击了按钮print(ElevatedButton pressed);},style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.blue),foregroundColor: MaterialStateProperty.all(Colors.white),padding: MaterialStateProperty.all(EdgeInsets.all(12.0)),),child: Text(登录,style: TextStyle(fontSize: 26.0,color: Colors.black,)),), 4. child属性
按钮的子组件通常是一个Text或Icon等用于显示按钮内容的组件
5. onHighlightChanged属性
当按钮被按下或释放时触发的回调函数
6. focusNode属性
控制按钮的焦点状态
7. autofocus属性
是否自动获取焦点
8. clipBehavior属性
内容溢出时的裁剪行为
9. enableFeedback属性
是否为按钮点击提供音频和触觉反馈 二、开发简单的登录页面
登录页比较简单用户名密码登录按钮。采用Material风格脚手架。
import package:flutter/material.dart;void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application.overrideWidget build(BuildContext context) {return MaterialApp(title: Flutter Demo, // 标题theme: ThemeData(// This is the theme of your application.//// Try running your application with flutter run. Youll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// hot reload (press r in the console where you ran flutter run,// or simply save your changes to hot reload in a Flutter IDE).// Notice that the counter didnt reset back to zero; the application// is not restarted.primarySwatch: Colors.blue,),home: const MyHomePage(title: Flutter Demo Home Page),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);// This widget is the home page of your application. It is stateful, meaning// that it has a State object (defined below) that contains fields that affect// how it looks.// This class is the configuration for the state. It holds the values (in this// case the title) provided by the parent (in this case the App widget) and// used by the build method of the State. Fields in a Widget subclass are// always marked final.final String title;overrideStateMyHomePage createState() _MyHomePageState();
}class _MyHomePageState extends StateMyHomePage with TickerProviderStateMixin {int _counter 0;// 文本内容String textToShow I love Flutter!;// 创建焦点节点对象FocusNode _nameFocusNode FocusNode();FocusNode _passwordFocusNode FocusNode();// 记录焦点状态bool _nameHasFocus false;bool _passwordHasFocus false;/*** 动画控制器*/late AnimationController controller;/*** 角度动画*/late CurvedAnimation curve;void _incrementCounter() {setState(() {// This call to setState tells the Flutter framework that something has// changed in this State, which causes it to rerun the build method below// so that the display can reflect the updated values. If we changed// _counter without calling setState(), then the build method would not be// called again, and so nothing would appear to happen._counter;// 更新文本内容if (_counter % 4 0) {textToShow I Study Flutter now;} else if (_counter % 4 1) {textToShow Flutter is so interesting;} else if (_counter % 4 2) {textToShow I love it more;} else {textToShow I learn it more funny;}});// 播放动画controller.forward();}/*** 监听输入框焦点变化焦点变化时保存焦点状态*/void _nameFocusChange() {// 存储状态变化setState(() {_nameHasFocus _nameFocusNode.hasFocus;});}/*** 监听输入框焦点变化焦点变化时保存焦点状态*/void _passwdFocusChange() {// 存储状态变化setState(() {_passwordHasFocus _passwordFocusNode.hasFocus;});}overridevoid initState() {super.initState();controller AnimationController(duration: const Duration(milliseconds: 2000),vsync: this,);curve CurvedAnimation(parent: controller,curve: Curves.easeIn,);// 监听输入框焦点变化_nameFocusNode.addListener(_nameFocusChange);_passwordFocusNode.addListener(_passwdFocusChange);}overridevoid dispose() {_nameFocusNode.removeListener(_nameFocusChange);_passwordFocusNode.removeListener(_passwdFocusChange);super.dispose();}overrideWidget build(BuildContext context) {// This method is rerun every time setState is called, for instance as done// by the _incrementCounter method above.//// The Flutter framework has been optimized to make rerunning build methods// fast, so that you can just rebuild anything that needs updating rather// than having to individually change instances of widgets.return Scaffold(appBar: AppBar(// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text(widget.title),),body: Center(child: Padding(padding: EdgeInsets.all(12.0),child: Column(// Column is also a layout widget. It takes a list of children and// arranges them vertically. By default, it sizes itself to fit its// children horizontally, and tries to be as tall as its parent.//// Invoke debug painting (press p in the console, choose the// Toggle Debug Paint action from the Flutter Inspector in Android// Studio, or the Toggle Debug Paint command in Visual Studio Code)// to see the wireframe for each widget.//// Column has various properties to control how it sizes itself and// how it positions its children. Here we use mainAxisAlignment to// center the children vertically; the main axis here is the vertical// axis because Columns are vertical (the cross axis would be// horizontal).mainAxisAlignment: MainAxisAlignment.center,children: Widget[const Text(用户登录,style: TextStyle(fontSize: 25.0,color: Colors.black,fontWeight: FontWeight.w200),),SizedBox(height: 12.0),TextField(focusNode: _nameFocusNode,decoration: InputDecoration(filled: true,fillColor:_nameHasFocus ? Colors.lightBlue[100] : Colors.grey[200],border: OutlineInputBorder(),hintText: 请输入姓名,hintStyle: TextStyle(color: Colors.grey),prefixIcon: Icon(Icons.person),),),SizedBox(height: 12.0),TextField(focusNode: _passwordFocusNode,obscureText: true, // 定输入框的文本是否应该被隐藏常用于密码输入框decoration: InputDecoration(filled: true,fillColor:_nameHasFocus ? Colors.lightBlue[100] : Colors.grey[200],border: OutlineInputBorder(),hintText: 请输入密码,hintStyle: TextStyle(color: Colors.grey),prefixIcon: Icon(Icons.lock),),),TextField(enabled: true,style: TextStyle(fontSize: 20.0, color: Colors.black,backgroundColor: Colors.cyan, // 文本输入颜色),),Text(You have pushed the button this many times:,),Text($_counter,style: Theme.of(context).textTheme.headline4,),// 新增一个自定义的Text(在State中存储)Text(textToShow),Center(child: FadeTransition(opacity: curve,child: const FlutterLogo(size: 100,),),),],),),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: Increment,child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}参考文献
Flutter速来系列6 Flutter同学 输入框TextField就算了还整个表单 - 掘金
