Flutter布局锦囊---简单的应用栏

设计给的效果如下：

拿到设计后，先把整体拆分成几个部分：

“公共应用栏”，可以给应用程序中的大部分页面使用的通用组件。

然后就可以开始进行编码了。

第1步：绘制组件树

第2步：实现“公共应用栏”

使用Flutter的应用栏（AppBar）组件，你可以实现一些简单定制效果。应用栏（AppBar）组件亮度（brightness）属性可以控制系统状态栏的字体颜色，比如，如果你把背景颜色（backgroundColor）属性设置成了浅色系，那么亮度（brightness）属性应该设置成明亮(light)的。

import 'package:flutter/material.dart';/// 自定义的一级导航组件。
Widget FirstNavigation(String title, [IconButton iconButton]) => AppBar(// 应用栏（`AppBar`）组件的标题（`title`）属性，应用栏中的主要组件。title: Text(title,style: TextStyle(color: Color(0xFF282828),fontSize: 18.0,),),// 图标主题（`iconTheme`）属性，用于应用栏图标的颜色、不透明度和大小。iconTheme: IconThemeData(color: Color(0xFF4A4A4A),),// 亮度（`brightness`）属性，应用栏（`AppBar`）组件的亮度。brightness: Brightness.light,// 背景颜色（`backgroundColor`）属性，用于应用栏（`AppBar`）组件的颜色。backgroundColor: Color(0xFFF9F9F9),// 中心标题（`centerTitle`）属性，标题是否应该居中。centerTitle: true,// 提高（`elevation`）属性，放置此应用栏的z坐标，可以控制应用栏下方阴影的大小。elevation: 0.0,// 行动（`actions`）属性，要在标题后显示的组件。actions: <Widget>[Container(width: 90.0,alignment: Alignment.centerRight,padding: const EdgeInsets.only(right: 8.0),decoration: BoxDecoration(image: DecorationImage(// 装饰图片（`DecorationImage`）类的图片（`image`）属性，将图像绘制成装饰。// 通常通过资产图片（`AssetImage`）使用随应用程序一起提供的图像，// 或通过网络图像（`NetworkImage`）使用从网络获取的图像。image: AssetImage('assets/bg_right_texture.png'),// 适应属性，如何在框里展示图像。// https://docs.flutter.io/flutter/painting/BoxFit-class.htmlfit: BoxFit.contain,),),// 运算符`??`，表示如果为空。child: iconButton ?? null,),],
);

第3步：还原效果

Flutter布局锦囊---简单的应用栏相关推荐

Flutter布局锦囊---绑定手机页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "顶部导航栏",标题+取消按钮+跳过按钮的应用栏. "手机号输入框",用于获取手机号码的圆角边框输入字 ...
Flutter布局锦囊---手机号登录页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",使用自定义的旋转木马滑块组件实现可以滚动的运营位. "登录表单",使用自定义的登录表单组件 ...
Flutter布局锦囊---完善信息页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "用户昵称输入",获取用户输入的昵称信息. "用户头像选取",获取用户选取作为头像的图片. " ...
Flutter布局锦囊---蜡笔画的表单
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "手机号输入框",使用自定义的登录表单字段组件实现的输入框. "验证码输入框",使用自定义的登录表单验 ...
Flutter布局锦囊---带输入字段的应用栏
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "堆栈容器",使用大小框(SizedBox)和堆栈(Stack)组件搞的容器,用于实现层次结构. "下层的导航& ...
Flutter布局锦囊---带彩条的文本字段
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "文本输入框",使用文本字段(TextField)组件实现的输入框. "状态指示条",使用容器(Con ...
Flutter布局锦囊---涂鸦风格按钮
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "可点击框",使用堆栈(Stack)组件布局的可点击区域. "底部矩形",用来衬托"主要矩形 ...
Flutter布局锦囊---轮播图片与滑块
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",可以通过左右滑动来切换图片. "进度条",显示"运营位"当前位置的进度 ...
Flutter布局锦囊---有背景图的头像选择
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "获取相册图片",Flutter团队开发的图片选择器(image_picker)插件,从手机相册中获取图片. " ...

Flutter布局锦囊---简单的应用栏

第1步：绘制组件树

第2步：实现“公共应用栏”

第3步：还原效果

Flutter布局锦囊---简单的应用栏相关推荐

最新文章

热门文章