写点什么

2021Java 面试笔试总结!Flutter 中的 widget

用户头像
Geek_f90455
关注
发布于: 1 小时前
style: TextStyle(            //颜色    color: Colors.red,        
复制代码


//字号 默认 14fontSize: 18,


//粗细 fontWeight: FontWeight.w800,


//斜体 fontStyle: FontStyle.italic,


//underline:下划线,overline:上划线,lineThrough:删除线 decoration: TextDecoration.lineThrough,decorationColor: Colors.black,


//solid:实线,double:双线,dotted:点虚线,dashed:横虚线,wavy:波浪线 decorationStyle:TextDecorationStyle.wavy),


);}class TextApp extends StatelessWidget {


@overrideWidgetbuild(BuildContext context){


return MaterialApp(title: "Text 演示",home: Scaffold(appBar: AppBar(title: Text("Text")),body: _TextBody(),


),


);


}}


![在这里插入图片描述](https://static001.geekbang.org/infoq/f6/f6acadad4be8c368daaa0120fe4edfcd.jpeg)**RichText**
如果需要显示更为丰富样式的文本(比如一段文本中文字不同颜色),可以使用 RichText或者 Text.rich```javaWidget _RichTextBody() { var textSpan = TextSpan( text: "Hello", style: TextStyle(color: Colors.red), children: [ TextSpan(text: "Flu", style: TextStyle(color: Colors.blue)), TextSpan(text: "uter", style: TextStyle(color: Colors.yellow)), ], ); //Text.rich(textSpan); return RichText(text: textSpan);}
复制代码



DefaultTextStyle 在 widget 树中,文本的样式默认是可以被继承的,因此,如果在 widget 树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式。相当于在 Android 中定义 Theme


Widget _DefaultStyle(){  DefaultTextStyle(    //设置文本默认样式 style: TextStyle(   color:Colors.red,   fontSize: 20.0,    ),    textAlign: TextAlign.start,    child: Column(      crossAxisAlignment:       CrossAxisAlignment.start,      children: <Widget>[                Text("Hello Flutter!"),                Text("Hello Flutter!"),                Text("Hello Flutter!",             style: TextStyle(               inherit: false, //不继承默认样式               color: Colors.grey          ),                ),            ],        ),    );}
复制代码


FlutterLogo 这个 Widget 用于显示 Flutter 的 logo......


Widget flutterLogo() {    return FlutterLogo(    //大小    size: 100,    //logo颜色 默认为 Colors.blue    colors: Colors.red,//markOnly:只显示logo,horizontal:logo右边显示flutter文字,stacked:logo下面显示文字    style: FlutterLogoStyle.stacked,    //logo上文字颜色    textColor: Colors.blue,    );}
复制代码



Icon


主要用于显示内置图标的 Widget


Widget icon() {    return Icon(      //使用预定义Material icons      // https://docs.flutter.io/flutter/material/Icons-class.html      Icons.add,    size: 100,    color: Colors.red);}
复制代码



Image 显示图片的 Widget。图片常用的格式主要有 bmp,jpg,png,gif,webp 等,Android 中并不是天生支持 gif 和 webp 动图,但是这一特性在 flutter 中被很好的支持了。



Iamge.asset 在工程目录下创建目录,如:assets,将图片放入此目录。打开项目根目录:pubspec.yaml



return MaterialApp(  title: "Image演示",  home: Scaffold(    appBar: AppBar(title: Text("Image")),    body: Image.asset("assets/banner.jpeg"),        ),);
复制代码


Image.file 在 sd 卡中放入一张图片。然后利用 path_provider 库获取 sd 卡根目录(Dart 库版本可以在:https://pub.dartlang.org/packages查询)。



注意权限


class ImageState extends State<ImageApp> {    Image image;   @override  void initState() {       super.initState();    getExternalStorageDirectory().then((path) {      setState(() {        image = Image.file(File("${path.path}${Platform.pathSeparator}banner.jpeg"      ));    });  });  }  @override  Widget build(BuildContext context) {    return MaterialApp(  title: "Image演示",  home: Scaffold(    appBar: AppBar(title: Text("Image")),    body: image,          ),      );   }}
复制代码


Image.network


直接给网络地址即可。Flutter 1.0,加载 https 时候经常出现证书错误。必须断开 AS 打开 app


Image.memory


Future<List<int>> _imageByte() async {    String path = (await getExternalStorageDirectory()).path;    return await File("$path${Platform.pathSeparator}banner.jpeg").readAsBytes();}class ImageState extends State<ImageApp> {    Image image;  @override  void initState() {        super.initState();    _imageByte().then((bytes) {       setState(() {        image = Image.memory(bytes);      });    });  }  @override  Widget build(BuildContext context) {   return MaterialApp(    title: "Image演示",    home: Scaffold(      appBar: AppBar(title: Text("Image")),      body: image,          ),   );  }}
复制代码


CircleAvatar


CircleAvatar(          //图片提供者 ImageProvider      backgroundImage: AssetImage("assets/banner.jpeg"),          //半径,控制大小      radius: 50.0,      );
复制代码


FadeInImage 当使用默认 Image widget 显示图片时,您可能会注意到它们在加载完成后会直接显示到屏幕上。这可能会让用户产生视觉突兀。如果最初显示一个占位符,然后在图像加载完显示时淡入,我们可以使用 FadeInImage 来达到这个目的!


 image =  FadeInImage.memoryNetwork(   placeholder: kTransparentImage,   image: 'https://flutter.io/images/homepage/header-illustration.png',    );
复制代码


按钮


Material widget 库中提供了多种按钮 Widget 如 RaisedButton、FlatButton、OutlineButton 等,它们都是直接或间接对 RawMaterialButton 的包装定制,所以他们大多数属性都和 RawMaterialButton 一样。所有 Material 库中的按钮都有如下相同点:


  1. 按下时都会有“水波动画”。

  2. 有一个 onPressed 属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。


RaisedButton"漂浮"按钮,它默认带有阴影和灰色背景


RaisedButton(  child: Text("normal"),  onPressed: () => {},        )
复制代码


FlatButton


扁平按钮,默认背景透明并不带阴影


FlatButton(  child: Text("normal"),  onPressed: () => {},        )
复制代码


OutlineButton


默认有一个边框,不带阴影且背景透明。


OutlineButton(  child: Text("normal"),  onPressed: () => {},        )
复制代码


IconButton


可点击的 Icon


IconButton(  child: Text("normal"),  onPressed: () => {},        )
复制代码


按钮外观可以通过其属性来定义,不同按钮属性大同小异


const FlatButton({  ...    @required this.onPressed, //按钮点击回调  this.textColor, //按钮文字颜色  this.disabledTextColor, //按钮禁用时的文字颜色  this.color, //按钮背景颜色this.disabledColor,//按钮禁用时的背景颜色this.highlightColor, //按钮按下时的背景颜色  this.splashColor, //点击时,水波动画中水波的颜色this.colorBrightness,//按钮主题,默认是浅色主题  this.padding, //按钮的填充  this.shape, //外形  @required this.child, //按钮的内容})  FlatButton( onPressed: () => {},   child: Text("Raised"),  //蓝色  color: Colors.blue,  //水波  splashColor: Colors.yellow,  //深色主题,这样文字颜色会变成白色  colorBrightness: Brightness.dark,   //圆角按钮  shape: RoundedRectangleBorder(    borderRadius: BorderRadius.circular(50)    ),)
复制代码


而 RaisedButton,默认配置有阴影,因此在配置 RaisedButton 时,拥有一系列 elevation 属性的配置


const RaisedButton({    ...    this.elevation = 2.0, //正常状态下的阴影   this.highlightElevation = 8.0,//按下时的阴影  this.disabledElevation = 0.0,// 禁用时的阴影  ...}
复制代码

输入框

import 'package:flutter/material.dart'; void main() => runApp(Demo1());   class Demo1 extends StatelessWidget {  @override    Widget build(BuildContext context) {    return MaterialApp(      title: "Demo1",      home: Scaffold(        appBar: AppBar(          title: Text("登录"),                ),      //线性布局,垂直方向      body: Column(        children: <Widget>[                      TextField(              //自动获得焦点            autofocus: true,            decoration: InputDecoration(              labelText: "用户名",              hintText: "用户名或邮箱",              prefixIcon: Icon(Icons.person)),            ),          TextField(              //隐藏正在编辑的文本             obscureText: true,              decoration: InputDecoration(               labelText: "密码",                hintText: "您的登录密码",                prefixIcon: Icon(Icons.lock)),            ),          ],        ),            ),    );    }}
复制代码



这个效果非常的“系统”,我们可能大多数情况下需要将下划线更换为矩形边框,这时候可能就需要组合 widget 来完成:


//容器 设置一个控件的尺寸、背景、margin Container(  margin: EdgeInsets.all(32),    child: TextField(      keyboardType: TextInputType.emailAddress,      decoration: InputDecoration(        labelText: "用户名",        hintText: "用户名或邮箱",        prefixIcon: Icon(Icons.person),            border: InputBorder.none //隐藏下划线)),//装饰    decoration: BoxDecoration(      // 边框浅灰色,宽度1像素      border: Border.all(color: Colors.red[200], width: 1.0),      //圆角      borderRadius: BorderRadius.circular(5.0),    ),  )
复制代码



焦点控制


FocusNode: 与 Widget 绑定,代表了这个 Widget 的焦点


FocusScope: 焦点控制范围


FocusScopeNode:控制焦点


class _TextFocusState extends State<TextFocusWidget> {  FocusNode focusNode1 = new   FocusNode();  FocusNode focusNode2 = new FocusNode();  void _listener() {  debugPrint("用户名输入框焦点:${focusNode1.hasFocus}");  }  @override  void initState() {        super.initState();    //监听焦点状态改变事件    focusNode1.addListener(_listener);  }  @override  void dispose() {    super.dispose();    focusNode1.dispose();    focusNode2.dispose();  }  @override  Widget build(BuildContext context) {    return Column(      children: <Widget>[        TextField(          autofocus: true,          //关联焦点          focusNode: focusNode1,          //设置键盘动作为: 下一步          textInputAction: TextInputAction.next,          //点击下一步执行回调          onEditingComplete: () {            //获得 context对应UI树的焦点范围 的焦点控制器          FocusScopeNode focusScopeNode = FocusScope.of(context);            //将焦点交给focusNode2          focusScopeNode.requestFocus(focusNode2);         },          decoration: InputDecoration(          labelText: "用户名",           hintText: "用户名或邮箱",         prefixIcon: Icon(Icons.person)),        ),        TextField(          //隐藏正在编辑的文本        obscureText: true,          focusNode: focusNode2,         decoration: InputDecoration(          labelText: "密码",           hintText: "您的登录密码",          refixIcon: Icon(Icons.lock)),        ),        custom(),      ],    );  }}
复制代码

获取输入内容

获取输入内容有两种方式:


  1. 定义两个变量,用于保存用户名和密码,然后在 onChange 触发时,各自保存一下输入内容。

  2. 通过 controller 直接获取。onChange 获得输入内容:


TextField(  onChanged: (s) => debugPrint("ssss:$s"),
复制代码


controller 获取:


定义一个 controller:


//定义一个controllerTextEditingController _unameController=new TextEditingController();
复制代码


然后设置输入框 controller:


TextField(  controller: _unameController, //设置controller    ...)
复制代码


通过 controller 获取输入框内容




### 如何获取免费架构学习资料?
![准备两个月,面试五分钟,Java中高级岗面试为何越来越难?](https://static001.geekbang.org/infoq/7a/7a60ea23587cfe8ac4c277916e189210.jpeg)
![准备两个月,面试五分钟,Java中高级岗面试为何越来越难?](https://static001.geekbang.org/infoq/bd/bd11b46b5645c88528908bcd01aa3efd.jpeg)
![准备两个月,面试五分钟,Java中高级岗面试为何越来越难?](https://static001.geekbang.org/infoq/db/db595c891c9732ba29b1bcc5b8d326c5.jpeg)
![准备两个月,面试五分钟,Java中高级岗面试为何越来越难?](https://static001.geekbang.org/infoq/df/dfb74befc87c1226e3dade6e902dd567.jpeg)
![准备两个月,面试五分钟,Java中高级岗面试为何越来越难?](https://static001.geekbang.org/infoq/e8/e81f207ecfe1540008fea59f82c0c862.jpeg)
> 由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!**[有需要的程序猿(媛)可以戳这里即可免费获取哦](https://gitee.com/vip204888/java-p7)**

复制代码


用户头像

Geek_f90455

关注

还未添加个人签名 2021.07.06 加入

还未添加个人简介

评论

发布
暂无评论
2021Java面试笔试总结!Flutter中的widget