Flutter 常用控件使用详解

最新推荐文章于 2024-08-10 08:36:36 发布

huydl

最新推荐文章于 2024-08-10 08:36:36 发布

阅读量1k

点赞数

分类专栏： flutter学习专栏文章标签： widget android

本文链接：https://blog.csdn.net/qq_33538121/article/details/113628135

版权

配置

由于Flutter会同时构建Android和IOS两个平台的发布包，所以Flutter同时依赖Android SDK和iOS SDK，在安装Flutter时也需要安装相应平台的构建工具和SDK，在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，可以将如下环境变量加入到用户环境变量中，可以参考国内镜像以获得有关镜像服务器的最新动态。

export PUB_HOSTED_URL= https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn

获取FlutterSdk，可以去flutter官网下载其最新可用的安装包 FlutterSdk

运行 flutter doctor

打印日志

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.25.0-8.3.pre, on Microsoft Windows [Version 10.0.17134.1967], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 4.0)
[√] VS Code (version 1.52.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

Flutter常用控件

Text

和Android 系统中的 Text类似，主要是为了显示文本内容。

import 'package:flutter/material.dart';

//基本组件的使用 1.Text 2.Container
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text widget",
      home: Scaffold(
          body: Center(
            child: Text(
            "Text文本内容Text文本内容Text文本内容",
            textAlign: TextAlign.center,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style:TextStyle(
              color: Color.fromRGBO(28, 30, 120, 1),//或者 Colors.black
              fontSize: 16,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid//实线
              ) ,
            ),
        ),
      ),
    );
  }

}

StatefulWidget：具有可变状态的窗口部件，因状态变更可以导致UI变更的的Widget，涉及到数据渲染场景，都使用StatefulWidget。
StatelessWidget：代表只有一种状态的组件，不可变状态窗口部件，也就是无状态的变更，UI静态固化的 widget ，页面的渲染性能更高。

home：Scaffold是Material library 中提供的一个组件,我们可以在里面设置导航栏、标题和包含主屏幕widget树的body属性。可以看到这里是在页面上添加了AppBar和一个Text。
在Widget组件中都是通过build方法来描述自己的内部结构。这里的build表示构建MyApp中使用的是MaterialApp的系统组件。

常用属性

TextAlign属性：

center: 文本以居中形式对齐
       left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
       right :右对齐，使用频率也不算高。
       start:以开始位置进行对齐，类似于左对齐。
       end: 以为本结尾处进行对齐，不常用。有点类似右对齐.

maxLines属性： 可以最多显示几行

overflow属性：用来设置文本溢出时，如何处理

      clip：直接切断，剩下的文字就没有了。
      ellipsis:在后边显示省略号，这个在工作中经常使用。
      fade: 溢出的部分会进行一个渐变消失的效果。

style属性：

fontSize大小
      Color颜色
      fontWeight加粗之类
      fontFamily字体类别 类似于ios中fontName 
      decoration 装饰字体，可以配置下划线、删除线等等，一般和 decorationStyle 配置使用，

TextField组件

文本输入框，类似于Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。

TextField(
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(10.0),
          icon: Icon(Icons.text_fields),
          labelText: '请输入你的姓名)',
          helperText: '请输入你的真实姓名',
        ),
        onChanged: _textFieldChanged,
        autofocus: false,
      ),


  void _textFieldChanged(String str) {
    print(str);
  }

增加一个keyboardType属性，把keyboardType设置为TextInputType.number可以看到每次我们让TextField获得焦点的时候弹出的键盘就变成了数字优先了。
然后我们为输入框做一些其他的效果，如提示文字，icon、标签文字等。我们给上面的代码新增decoration属性，设置相关属性，可以发现当我们的TextField获得焦点时，图标会自动变色，提示文字会自动上移。

onChanged是每次输入框内每次文字变更触发的回调，onSubmitted是用户提交而触发的回调。每当用户改变输入框内的文字，都会在控制台输出现在的字符串.与 onSubmitted 用法相同。

/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
  //手机号的控制器
  TextEditingController phoneController = TextEditingController();

  //密码的控制器
  TextEditingController passController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('输入和选择'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            contr