如何增加腳手架中AppBar的大小？

Question

當我嘗試向其添加更多小部件時，我的 appBar 溢出了。 到某個點還好，然后我想加一些上下填充，然后就溢出了。 有什么辦法可以增加應用程序欄的大小？

我在文檔中看到了 preferredSize 屬性，但是我無法使用它。

我希望我的應用欄連續包含一個照片圖標、一些文本和另一個圖標。 我是按以下方式做的。 我知道它可能有點粗糙，但無法找出任何其他方式。 （ps我試過領先但是沒有給出預期的結果）

我的代碼：

return Scaffold(

     appBar: AppBar(
     // preferredSize
      // ERROR: The named paramtere isnt defined 

       title: Column(
         children: <Widget>[,
           Row(
             children: <Widget>[
               SizedBox(width: 10.0),
               Container(
                   width: 50.0,
                   height: 50.0,
                   decoration: new BoxDecoration(
                       shape: BoxShape.circle,
                       image: new DecorationImage(
                           fit: BoxFit.fitWidth,
                           image: new AssetImage('assets/jane.jpg')
                       )
                   )),
               SizedBox(width: 15.0),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
                   SizedBox(height: 5.0),
                   Text('Good Morning!', style: TextStyle(color: Color(0XFF9c9c9c) , fontWeight: FontWeight.w400, fontSize: 16.0)),
                   Text('Jane Doe ', style: TextStyle(color: Color(0xFF2a2a2a),fontWeight: FontWeight.w700,fontSize: 25.0))
                 ],
               ),
             ],
           ),

         ],
       ),


       bottom: TabBar(
         ...),
     ),      
     body: (...)
     ,);
 } }

Answer 1

像這樣創建自定義應用欄

import 'package:flutter/material.dart';

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
    CustomAppBar({Key key, this.title}) : preferredSize = Size.fromHeight(56.0), super(key: key);

    @override
    final Size preferredSize;
    final String title;

    @override
    _CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar>{

  String get title => widget.title;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      leading: IconButton(
        icon: Icon(Icons.arrow_back_ios, size: 20),
        onPressed: () => Navigator.pop(context),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      titleSpacing: 0,
    );
  }
}

Answer 2

你可以這樣做：

AppBar(
 title: Text('Sized App Bar'),
 bottom: PreferredSize(
  child: Text('PreferredSize must have a child'),
  preferredSize: Size.fromHeight(10), //Change 10 to which ever size you desire.
 ),
),

Answer 3

在 appBar 屬性上使用 PreferredSize 小部件：

Scaffold(
    appBar: PreferredSize(
        preferredSize: const Size.fromHeight(150.0), // Change 150.0 for your header height
        child: Header()), // Create your Header widget with the title content
    body: ...