Flutter学习-9

推荐文章

Flutter学习-9

基础Widget

实现圆角头像

方式一：CircleAvatar

CircleAvatar可以实现圆角头像，也可以添加一个子Widget：

const CircleAvatar({
 Key key,
 this.child, // 子Widget
 this.backgroundColor, // 背景颜色
 this.backgroundImage, // 背景图像
 this.foregroundColor, // 前景颜色
 this.radius, // 半径
 this.minRadius, // 最小半径
 this.maxRadius, // 最大半径
})

我们来实现一个圆形头像：

注意一：这里我们使用的是NetworkImage，因为backgroundImage要求我们传入一个ImageProvider；

ImageProvider是一个抽象类，事实上所有我们前面创建的Image对象都有包含image属性，该属性就是一个ImageProvider

注意二：这里我还在里面添加了一个文字，但是我在文字外层包裹了一个Container；

这里Container的作用是为了可以控制文字在其中的位置调整；

class HomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: CircleAvatar(
    radius: 100,
    backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
    child: Container(
     alignment: Alignment(0, .5),
     width: 200,
     height: 200,
     child: Text("兵长利威尔")
    ),
   ),
  );
 }
}

方式二：ClipOval

ClipOval也可以实现圆角头像，而且通常是在只有头像时使用

class HomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: ClipOval(
    child: Image.network(
     "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
     width: 200,
     height: 200,
    ),
   ),
  );
 }
}

3.3.2. 实现圆角图片

方式一：ClipRRect

ClipRRect用于实现圆角效果，可以设置圆角的大小。

实现代码如下，非常简单：

class HomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Image.network(
     "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
     width: 200,
     height: 200,
    ),
   ),
  );
 }
}

表单Widget

和用户交互的其中一种就是输入框，比如注册、登录、搜索，我们收集用户输入的内容将其提交到服务器。

TextField的使用

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.obscureText = false,
 this.autocorrect = true,
 this.maxLines = 1,
 this.minLines,
 this.expands = false,
 this.maxLength,
 this.maxLengthEnforced = true,
 this.onChanged,
 this.onEditingComplete,
 this.onSubmitted,
 this.inputFormatters,
 this.enabled,
 this.cursorWidth = 2.0,
 this.cursorRadius,
 this.cursorColor,
 this.keyboardAppearance,
 this.scrollPadding = const EdgeInsets.all(20.0),
 this.dragStartBehavior = DragStartBehavior.start,
 this.enableInteractiveSelection = true,
 this.onTap,
 this.buildCounter,
 this.scrollController,
 this.scrollPhysics,
})

一些属性比较简单：keyboardType键盘的类型，style设置样式，textAlign文本对齐方式，maxLength最大显示行数等等；

decoration：用于设置输入框相关的样式
icon：设置左边显示的图标
labelText：在输入框上面显示一个提示的文本
hintText：显示提示的占位文字
border：输入框的边框，默认底部有一个边框，可以通过InputBorder.none删除掉
filled：是否填充输入框，默认为false
fillColor：输入框填充的颜色
controller：
onChanged：监听输入框内容的改变，传入一个回调函数
onSubmitted：点击键盘中右下角的down时，会回调的一个函数

TextField的样式以及监听

class HomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Container(
   padding: EdgeInsets.all(20),
   child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
     TextFieldDemo()
    ],
   ),
  );
 }
}

class TextFieldDemo extends StatefulWidget {
 @override
 _TextFieldDemoState createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
 @override
 Widget build(BuildContext context) {
  return TextField(
   decoration: InputDecoration(
    icon: Icon(Icons.people),
    labelText: "username",
    hintText: "请输入用户名",
    border: InputBorder.none,
    filled: true,
    fillColor: Colors.lightGreen
   ),
   onChanged: (value) {
    print("onChanged:$value");
   },
   onSubmitted: (value) {
    print("onSubmitted:$value");
   },
  );
 }
}

TextField的controller

我们可以给TextField添加一个控制器（Controller），可以使用它设置文本的初始值，也可以使用它来监听文本的改变；

事实上，如果我们没有为TextField提供一个Controller，那么会Flutter会默认创建一个TextEditingController

class _TextFieldDemoState extends State<TextFieldDemo> {
 final textEditingController = TextEditingController();

 @override
 void initState() {
  super.initState();

  // 1.设置默认值
  textEditingController.text = "Hello World";

  // 2.监听文本框
  textEditingController.addListener(() {
   print("textEditingController:textEditingController.text");
  });
 }
	
 // ...省略build方法
}

Form表单的使用

在我们开发注册、登录页面时，通常会有多个表单需要同时获取内容或者进行一些验证，如果对每一个TextField都分别进行验证，是一件比较麻烦的事情。

做过前端的开发知道，我们可以将多个input标签放在一个form里面，Flutter也借鉴了这样的思想：我们可以通过Form对输入框进行分组，统一进行一些操作。

Form表单的基本使用

Form表单也是一个Widget，可以在里面放入我们的输入框。

通过Form的包裹，来实现一个注册的页面：

class FormDemo extends StatefulWidget {
 @override
 _FormDemoState createState() => _FormDemoState();
}

class _FormDemoState extends State<FormDemo> {
 @override
 Widget build(BuildContext context) {
  return Form(
   child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
     TextFormField(
      decoration: InputDecoration(
       icon: Icon(Icons.people),
       labelText: "用户名或手机号"
      ),
     ),
     TextFormField(
      obscureText: true,
      decoration: InputDecoration(
       icon: Icon(Icons.lock),
       labelText: "密码"
      ),
     ),
     SizedBox(height: 16,),
     Container(
      width: double.infinity,
      height: 44,
      child: RaisedButton(
       color: Colors.lightGreen,
       child: Text("注 册", style: TextStyle(fontSize: 20, color: Colors.white),),
       onPressed: () {
        print("点击了注册按钮");
       },
      ),
     )
    ],
   ),
  );
 }
}

保存和获取表单数据

我们调用Form的State对象的save方法，就会调用Form中放入的TextFormField的onSave回调：

TextFormField(
 decoration: InputDecoration(
  icon: Icon(Icons.people),
  labelText: "用户名或手机号"
 ),
 onSaved: (value) {
  print("用户名：$value");
 },
),

但是，我们需要在点击按钮时，拿到 Form对象来调用它的save

class FormDemo extends StatefulWidget {
 @override
 _FormDemoState createState() => _FormDemoState();
}

class _FormDemoState extends State<FormDemo> {
 final registerFormKey = GlobalKey<FormState>();
 String username, password;

 void registerForm() {
  registerFormKey.currentState.save();

  print("username:$username password:$password");
 }

 @override
 Widget build(BuildContext context) {
  return Form(
   key: registerFormKey,
   child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
     TextFormField(
      decoration: InputDecoration(
       icon: Icon(Icons.people),
       labelText: "用户名或手机号"
      ),
      onSaved: (value) {
       this.username = value;
      },
     ),
     TextFormField(
      obscureText: true,
      decoration: InputDecoration(
       icon: Icon(Icons.lock),
       labelText: "密码"
      ),
      onSaved: (value) {
       this.password = value;
      },
     ),
     SizedBox(height: 16,),
     Container(
      width: double.infinity,
      height: 44,
      child: RaisedButton(
       color: Colors.lightGreen,
       child: Text("注 册", style: TextStyle(fontSize: 20, color: Colors.white),),
       onPressed: registerForm,
      ),
     )
    ],
   ),
  );
 }
}

验证填写的表单数据

在表单中，我们可以添加验证器，如果不符合某些特定的规则，那么给用户一定的提示信息

比如我们需要账号和密码有这样的规则：账号和密码都不能为空。

按照如下步骤就可以完成整个验证过程：

1、为TextFormField添加validator的回调函数；

2、调用Form的State对象的validate方法，就会回调validator传入的函数；

也可以为TextFormField添加一个属性：autovalidate

不需要调用validate方法，会自动验证是否符合要求；

Align组件

Align介绍

Align对齐，在其他端的开发中（iOS、Android、前端）Align通常只是一个属性，但是Flutter中Align也是一个组件。

我们可以通过源码来看一下Align有哪些属性：

const Align({
 Key key,
 this.alignment: Alignment.center, // 对齐方式，默认居中对齐
 this.widthFactor, // 宽度因子，不设置的情况，会尽可能大
 this.heightFactor, // 高度因子，不设置的情况，会尽可能大
 Widget child // 要布局的子Widget
})

这里我们特别解释一下widthFactor和heightFactor作用：

因为子组件在父组件中的对齐方式必须有一个前提，就是父组件得知道自己的范围（宽度和高度）；

如果widthFactor和heightFactor不设置，那么默认Align会尽可能的大（尽可能占据自己所在的父组件）；

我们也可以对他们进行设置，比如widthFactor设置为3，那么相对于Align的宽度是子组件跨度的3倍；

Align演练

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Align(
   child: Icon(Icons.pets, size: 36, color: Colors.red),
   alignment: Alignment.bottomRight,
   widthFactor: 3,
   heightFactor: 3,
  );
 }
}

Center组件

Center介绍

Center组件我们在前面已经用过很多次了。

事实上Center组件继承自Align，只是将alignment设置为Alignment.center。

源码分析：

class Center extends Align {
 const Center({
  Key key,
  double widthFactor,
  double heightFactor,
  Widget child
 }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

Center演练

我们将上面的代码Align换成Center

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Icon(Icons.pets, size: 36, color: Colors.red),
   widthFactor: 3,
   heightFactor: 3,
  );
 }
}

Padding组件

Padding介绍

Padding组件在其他端也是一个属性而已，但是在Flutter中是一个Widget，但是Flutter中没有Margin这样一个Widget，这是因为外边距也可以通过Padding来完成。

Padding通常用于设置子Widget到父Widget的边距（你可以称之为是父组件的内边距或子Widget的外边距）。

const Padding({
 Key key,
 @requiredthis.padding, // EdgeInsetsGeometry类型（抽象类），使用EdgeInsets
 Widget child,
})

Padding

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Padding(
   padding: EdgeInsets.all(20),
   child: Text(
    "莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
    style: TextStyle(
     color: Colors.redAccent,
     fontSize: 18
    ),
   ),
  );
 }
}

Container组件

Container组件类似于其他Android中的View，iOS中的UIView。

如果你需要一个视图，有一个背景颜色、图像、有固定的尺寸、需要一个边框、圆角等效果，那么就可以使用Container组件。

Container介绍

Container在开发中被使用的频率是非常高的，特别是我们经常会将其作为容器组件。

下面我们来看一下Container有哪些属性：

Container({
 this.alignment,
 this.padding, //容器内补白，属于decoration的装饰范围
 Color color, // 背景色
 Decoration decoration, // 背景装饰
 Decoration foregroundDecoration, //前景装饰
 double width,//容器的宽度
 double height, //容器的高度
 BoxConstraints constraints, //容器大小的限制条件
 this.margin,//容器外补白，不属于decoration的装饰范围
 this.transform, //变换
 this.child,
})

大多数属性在介绍其它容器时都已经介绍过了，不再赘述，但有两点需要说明：

容器的大小可以通过width、height属性来指定，也可以通过constraints来指定，如果同时存在时，width、height优先。实际上Container内部会根据width、height来生成一个constraints；

color和decoration是互斥的，实际上，当指定color时，Container内会自动创建一个decoration；

decoration属性稍后我们详细学习；

Container演练

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Container(
    color: Color.fromRGBO(3, 3, 255, .5),
    width: 100,
    height: 100,
    child: Icon(Icons.pets, size: 32, color: Colors.white),
   ),
  );
 }
}

BoxDecoration

Container有一个非常重要的属性 decoration：

他对应的类型是Decoration类型，但是它是一个抽象类。

在开发中，我们经常使用它的实现类BoxDecoration来进行实例化。

BoxDecoration常见属性：

const BoxDecoration({
  this.color, // 颜色，会和Container中的color属性冲突
  this.image, // 背景图片
  this.border, // 边框，对应类型是Border类型，里面每一个边框使用BorderSide
  this.borderRadius, // 圆角效果
  this.boxShadow, // 阴影效果
  this.gradient, // 渐变效果
  this.backgroundBlendMode, // 背景混合
  this.shape = BoxShape.rectangle, // 形变
 })

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Container(
//    color: Color.fromRGBO(3, 3, 255, .5),
    width: 150,
    height: 150,
    child: Icon(Icons.pets, size: 32, color: Colors.white),
    decoration: BoxDecoration(
     color: Colors.amber, // 背景颜色
     border: Border.all(
      color: Colors.redAccent,
      width: 3,
      style: BorderStyle.solid
     ), // 这里也可以使用Border.all统一设置
//      top: BorderSide(
//       color: Colors.redAccent,
//       width: 3,
//       style: BorderStyle.solid
//      ),
     borderRadius: BorderRadius.circular(20), // 这里也可以使用.only分别设置
     boxShadow: [
      BoxShadow(
       offset: Offset(5, 5),
       color: Colors.purple,
       blurRadius: 5
      )
     ],
//     shape: BoxShape.circle, // 会和borderRadius冲突
     gradient: LinearGradient(
      colors: [
       Colors.green,
       Colors.red
      ]
     )
    ),
   ),
  );
 }
}

实现圆角图像

class HomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
     borderRadius: BorderRadius.circular(20),
     image: DecorationImage(
      image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
     )
    ),
   ),
  );
 }
}