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

设计给的效果如下:

UI布局图

拿到设计后,先把整体拆分成几个部分:

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

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

第1步:绘制组件树

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.html
          fit: BoxFit.contain,
        ),
      ),
      // 运算符`??`,表示如果为空。
      child: iconButton ?? null,
    ),
  ],
);

第3步:还原效果

Flutter布局锦囊---简单的应用栏_第2张图片

你可能感兴趣的:(dart,flutter,Flutter锦囊)