top_bar.dart 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import 'package:flutter/Material.dart';
  2. import 'package:flutter_screenutil/flutter_screenutil.dart';
  3. /// 顶部栏
  4. class TopBar extends StatelessWidget {
  5. /// 左边的组件,例如返回按钮
  6. final Widget? leftWidget;
  7. /// 中间的组件,例如标题
  8. final Widget? centerWidget;
  9. /// 右边的组件
  10. final Widget? rightWidget;
  11. const TopBar({
  12. super.key,
  13. this.leftWidget,
  14. this.centerWidget,
  15. this.rightWidget,
  16. });
  17. @override
  18. Widget build(BuildContext context) {
  19. return Container(
  20. // 宽度撑满父组件
  21. width: double.infinity,
  22. height: kToolbarHeight,
  23. // 背景颜色
  24. color: Colors.transparent,
  25. child: ConstrainedBox(
  26. // 设置宽度为无限大,撑满父组件,否则Stack获取不到高度,会报错
  27. constraints: BoxConstraints(minWidth: double.infinity),
  28. child: Stack(
  29. alignment: Alignment.center,
  30. children: [
  31. // 左边按钮
  32. Positioned(
  33. left: 16.w,
  34. child: leftWidget != null ? leftWidget! : SizedBox.shrink(),
  35. ),
  36. // 中间的标题
  37. Positioned(
  38. left: 0,
  39. right: 0,
  40. child: centerWidget != null ? centerWidget! : SizedBox.shrink(),
  41. ),
  42. // 右边的按钮
  43. Positioned(
  44. right: 16.w,
  45. child: rightWidget != null ? rightWidget! : SizedBox.shrink(),
  46. ),
  47. ],
  48. ),
  49. ),
  50. );
  51. }
  52. }