Flutter_学习记录_自定义 AppBar

完全自定义 AppBar 的布局，通过 FlexibleSpace 或者 CustomScrollView 实现。

代码示例：

import 'package:flutter/material.dart';
import 'package:flutter_fangxm/app/service/ScreenAdapter.dart';

import 'package:get/get.dart';

import '../controllers/product_list_controller.dart';

class ProductListView extends GetView<ProductListController> {
  const ProductListView({super.key});


  // 导航栏的title
  Widget _appBarTitleWidget() {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 0,  Screenadapter.width(40),0), 
      height: Screenadapter.height(100),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Color.fromARGB(10, 0, 0, 0)
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(padding: EdgeInsets.fromLTRB(10, 0, 0, 0), child: Icon(Icons.search, color: Colors.black26)),
          Expanded(child: Text("耳机", style: TextStyle(color: Colors.black45, fontSize: Screenadapter.fontSize(36)))),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(kToolbarHeight),
         child: Container(
          padding: EdgeInsets.fromLTRB(0, Screenadapter.stateBarHeight(), 0, 0),
          child: Row(
            children: [
              // 返回按钮
              IconButton(
                icon: Icon(Icons.arrow_back_ios_new, color: Colors.black87),
                onPressed: () {
                  // 处理点击事件
                  Get.back();
                },
              ),
              // 搜索视图
              Expanded(
                child: _appBarTitleWidget(),
              ),
            ],
          ),
        )
      ),
      body: const Center(
        child: Text(
          'ProductListView is working',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

解释

• PreferredSize：

用于创建一个自定义高度的 AppBar。

• Row：

使用 Row 布局来自定义 leading 和 title 的排列方式。

效果图如下：