flutter实用笔记

前言

写下这一篇文章是为了记录这段时间使用flutter 制作项目中一些比较常用的组件，以及具体怎么使用，获得怎样的效果。我使用的貌似是flutter4。由于官方更新迭代的差别比较明显，可能之后许多内容对应最新的flutter不适用，在此只供参考。望周知。

界面组件

顾名思义，用于前端书写界面的一些组件，有系统封装的，也可以自己在官网商城中下载，如果国内打不开的话，建议链接vpn。

一下界面组件下载地址

第三方插件官方下载地址

输入框

我使用到的输入框有两个，大体上是一样的。使用方式如一下代码，只用一点书写区别。

有时候，输入框需要输入许多内容，并且是他自动换行，如果手动设置的话，在界面中只显示一行。

这两个组件提供了一个变量maxLines 。默认值为1

将其设置为null，即可自动换行，当然也可以设置为固定的行数。填入固定的整数就可以了。

TextField

在TextField中，是没有 initialValue 这个初始值的变量设置，但是可以使用其他的方式

使用controller 对TextField 设置初始值，如下代码

dart 复制代码

TextField(
      style: TextStyle(fontSize: ScreenUtil().setSp(30)), //对展示的字体设置大小，这里使用了插件，对字体进行适配
       inputFormatters: [
         LengthLimitingTextInputFormatter(8),		//对输入作限制，这里只能输入8位数
         FilteringTextInputFormatter.allow(
             RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]"))			//对输入作限制，进行正则匹配，符合条件的才能输入进来。
       ],
       //initialValue: "展示这个组件时的初始值",			
       controller: TextEditingController(
              text: ""),
       onChanged: (value) {
         //输入时的事件
       },
       keyboardType: TextInputType.numberWithOptions(), 		//点击输入框后，展示的键盘或者输入法键盘为什么类型
       decoration: InputDecoration(
         border: OutlineInputBorder(),
         hintStyle: TextStyle(color: Colors.grey),
         contentPadding: EdgeInsets.fromLTRB(15.0, 0, 0, 15),
         hintText: '输入提示',
       ),
     )

TextFormField

dart 复制代码

TextFormField(
      style: TextStyle(fontSize: ScreenUtil().setSp(30)), //对展示的字体设置大小，这里使用了插件，对字体进行适配
       inputFormatters: [
         LengthLimitingTextInputFormatter(8),		//对输入作限制，这里只能输入8位数
         FilteringTextInputFormatter.allow(
             RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]"))			//对输入作限制，进行正则匹配，符合条件的才能输入进来。
       ],
       initialValue: "展示这个组件时的初始值",
       onChanged: (value) {
         //输入时的事件
       },
       keyboardType: TextInputType.numberWithOptions(), 		//点击输入框后，展示的键盘或者输入法键盘为什么类型
       decoration: InputDecoration(
         border: OutlineInputBorder(),
         hintStyle: TextStyle(color: Colors.grey),
         contentPadding: EdgeInsets.fromLTRB(15.0, 0, 0, 15),
         hintText: '输入提示',
       ),
     )

按钮

文字按钮 TextButton ，

只显示文字的按钮

图标按钮 IconButton

可以只展示一个图标

一般按钮 ElevatedButton

一个方框中有显示的文字

下列是按钮的普通写法，按钮事件在onPressed中，调整按钮的样式在style 中

dart 复制代码

 ElevatedButton(
    onPressed: () {},
     child: Text("按钮"),
     style: ButtonStyle(),
   )

有的需求，需要在某一时刻，使得按钮不可点击。我查阅了许多资料，网上很多文章都是说在按钮中，设置其isenable为false。

在之前的flutter中应该都是通过控制isenable的值，从而控制按钮的状态是否可以点击。但是在我使用的flutter版本中，按钮中并没有isenable这个值。只能使用一下方案。

将按钮事件中，设置为null。

dart 复制代码

 ElevatedButton(
    onPressed: null,
     child: Text("按钮"),
     style: ButtonStyle(),
   )

顶部appBar

AppBar 组件有许多功能，比如分页，也用到了这个，在此只记录其中三个功能，返回按钮、标题、标题右侧的组件

title 中是显示的顶部标题，在actions中，可以展示在顶部标题右侧的内容。可以是文字，下拉框、按钮等，具体不限制。因为他是一个

List 队列。

如果返回按钮没有任何其他的操作的话，就可以如下图这样写。

dart 复制代码

appBar: AppBar(title: Text(""), actions: []),

如果点击返回的时候需要进行其他的特殊操作。那么如下代码

dart 复制代码

appBar: AppBar(
    centerTitle: true,
     leading: IconButton(
         onPressed: () {
         //点击返回按钮
         },
         icon: Icon(Icons.arrow_back)),
     iconTheme: IconThemeData(color: Colors.blue),
     backgroundColor: Colors.white,
     elevation: 0,
     title: Text("标题", ),
     actions: [],
   )

在leading 中写返回按钮，并且设置icon颜色。通过iconTheme 设置返回的按钮颜色