Flutter CupertinoSliverNavigationBar


简介

ios-11风格下拥有一个较大标题块的导航栏目

基本用法

该组件使用时. 必须做为含有slivers属性的滚动列表的子组件中,例如CustomScrollView

实例演示

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

class CupertinoSliverNavigationBarDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<CupertinoSliverNavigationBarDemo> {
  double value = 0.0;
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: DecoratedBox(
        decoration: const BoxDecoration(color: Color(0xFFEFEFF4)),
        child: Container(
          height: 600.0,
          child: CustomScrollView(
            slivers: <Widget>[
            CupertinoSliverNavigationBar(
              largeTitle: const Text('demo', maxLines: 1,),
              previousPageTitle: 'Cupertino',
              trailing: Icon(Icons.perm_camera_mic)
            ),
            CupertinoSliverRefreshControl(
              onRefresh: () {
              },
            ),
            SliverSafeArea(
                top: false, // Top safe area is consumed by the navigation bar.
                sliver: SliverList(
                  delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                      return _ListItem(name: 'name$index',place: 'place$index', date: 'date',  called: true);
                    },
                    childCount: 20,
                  ),
                ),
              ),
            ],
          ),
        )
      ),
    );
  }

}




class _ListItem extends StatelessWidget {
  const _ListItem({
    this.name,
    this.place,
    this.date,
    this.called,
  });

  final String name;
  final String place;
  final String date;
  final bool called;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: CupertinoColors.white,
      height: 60.0,
      padding: const EdgeInsets.only(top: 9.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 38.0,
            margin: EdgeInsets.only(top: 10),
            child: called
                ? const Align(
              alignment: Alignment.topCenter,
              child: Icon(
                CupertinoIcons.phone_solid,
                color: CupertinoColors.inactiveGray,
                size: 28.0,
              ),
            )
                : null,
          ),
          Expanded(
            child: Container(
              decoration: const BoxDecoration(
                border: Border(
                  bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
                ),
              ),
              padding: const EdgeInsets.only(left: 1.0, bottom: 9.0, right: 10.0),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          name,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontWeight: FontWeight.w600,
                            letterSpacing: -0.18,
                          ),
                        ),
                        Text(
                          place,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontSize: 15.0,
                            letterSpacing: -0.24,
                            color: CupertinoColors.inactiveGray,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Text(
                    date,
                    style: const TextStyle(
                      color: CupertinoColors.inactiveGray,
                      fontSize: 15.0,
                      letterSpacing: -0.41,
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.only(left: 9.0),
                    child: Icon(
                        CupertinoIcons.info,
                        color: CupertinoColors.activeBlue
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}