自定义应用栏底部溢出 - Flutter

Question

我设计了一个应用栏并在我的主屏幕中调用它，如下所示：

return Scaffold(
      body: Container(
        color: const Color(0xFF191919),
        child: Column(
          children: [
            CustomAppBar(userEmail: userEmail),
          ],
        ),
      ),
    );

它总是抛出底部溢出，这是Appbar设计：

return AppBar(
      backgroundColor: Colors.black,
      elevation: 0,
      leading: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.asset('assets/logo.png'), // Your logo here
      ),
      title: Container(
        height: 40,
        decoration: BoxDecoration(
          color: Colors.grey[850],
          borderRadius: BorderRadius.circular(30),
        ),
        child: TextField(
          style: const TextStyle(color: Colors.white),
          decoration: InputDecoration(
            hintText: 'Search News, Teams, Players ...',
            hintStyle: const TextStyle(color: Colors.grey),
            prefixIcon: const Icon(Icons.search, color: Colors.grey),
            filled: true,
            fillColor: Colors.grey[850],
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(30),
              borderSide: BorderSide.none,
            ),
          ),
        ),
      ),
      actions: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 20,
                backgroundColor: Colors.grey[600],
                child: Icon(
                  Icons.person,
                  color: Colors.white,
                  size: 24,
                ),
              ),
              const SizedBox(height: 4),
              Text(
                userName, // Display the fetched user name
                style: const TextStyle(color: Colors.white, fontSize: 12),
              ),
            ],
          ),
        ),
      ],
    );

溢出恰好发生在操作部分。我尝试为我的主屏幕和我设计应用栏的文件添加 PrefferedSize() 但没有解决问题。谢谢你

Answer 1

AppBar 尾部的操作旨在支持图标或图标按钮，而不是大组件。您的

CirleAvatar

、

SizedBox

和

Text

列对于

AppBar

高度来说太多了。如果您尝试增加标题容器，它不会溢出，但会隐藏内容而不扩展您的栏。我推荐你的 3 种方法：

1. 减小元素尺寸： 具有缩小尺寸操作的应用栏 我还将您的

   AppBar

   实现为扩展小部件，因此您可以在

   Scaffold(appBar: ...)

中使用它

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(userEmail: "[email protected]"),
      body: Container(
          color: Colors.grey, child: Center(child: Text("Hello world!"))),
    );
  }
}

class CustomAppBar extends AppBar {
  final String userEmail;
  final imagePath =
      'https://0.gravatar.com/avatar/33252cd1f33526af53580fcb1736172f06e6716f32afdd1be19ec3096d15dea5';

  CustomAppBar({required this.userEmail});

  @override
  Color? get backgroundColor => Colors.black;

  @override
  Widget? get leading => Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.network(imagePath), // Your logo here
      );

  @override
  Widget? get title => Container(
        height: 40,
        decoration: BoxDecoration(
          color: Colors.grey[850],
          borderRadius: BorderRadius.circular(30),
        ),
        child: TextField(
          style: const TextStyle(color: Colors.white),
          decoration: InputDecoration(
            hintText: 'Search News, Teams, Players ...',
            hintStyle: const TextStyle(color: Colors.grey),
            prefixIcon: const Icon(Icons.search, color: Colors.grey),
            filled: true,
            fillColor: Colors.grey[850],
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(30),
              borderSide: BorderSide.none,
            ),
          ),
        ),
      );

  @override
  List<Widget>? get actions => [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 10,
                backgroundColor: Colors.grey[600],
                child: Icon(
                  Icons.person,
                  color: Colors.white,
                  size: 12,
                ),
              ),
              const SizedBox(height: 2),
              Text(
                userEmail, // Display the fetched user name
                style: const TextStyle(color: Colors.white, fontSize: 12),
              ),
            ],
          ),
        )
      ];
}

2. 内联操作： 带有内嵌操作的应用栏

@override
List<Widget>? get actions => [
      Text(
        userEmail, // Display the fetched user name
        style: const TextStyle(color: Colors.white, fontSize: 12),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
          children: [
             CircleAvatar(
              radius: 16,
              backgroundColor: Colors.grey[600],
              child: Icon(
                Icons.person,
                color: Colors.white,
                size: 12,
              ),
            ),
          ],
        ),
      )
    ];

3. 创建一个假的

   AppBar

   只需在

   Column

   主体处的

   Scaffold

   顶部使用全宽行即可。