首页 > 建站教程 > APP开发,混合APP >  PreferredSizeWidget——自定义AppBar正文

PreferredSizeWidget——自定义AppBar

要实现自定义AppBar,需要注意两点:
1、AppBar不是平常自定义组件简单的继承StatelessWidget或者StatefulWidget,它还必须实现PreferredSizeWidget
2、必须重写preferredSize,preferredSize必须要有return

下面是一个简单的自定义appBar:
import 'package:flutter/material.dart';

class AppBarComponent extends StatelessWidget implements PreferredSizeWidget{

  final String title;
  final Color bgColor;
  final Color textColor;

  AppBarComponent({@required this.title, this.bgColor = Colors.blue, this.textColor = Colors.white});

  @override
  Size get preferredSize {
    return Size.fromHeight(110.0);
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      centerTitle: true,
      backgroundColor: this.bgColor,
      title: Text(
        this.title,
        style: TextStyle(
          fontSize: 20.0,
          color: this.textColor,
        ),
      ),
    );
  }
}
使用自定义appBar:
@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBarComponent(title: '基础信息完善',),
    );
}