Question

当我尝试向其添加更多小部件时，我的appBar溢出。到某一点还可以，然后我想添加一些上下填充，然后溢出。有什么办法可以增加应用栏尺寸？

我在文档中看到了属性preferredSize，但是我无法使用它。

我希望我的应用程序栏连续包含照片图标，一些文本和另一个图标。我按照以下方式进行。我知道它可能有点粗糙，但无法找到其他方法。（请问我尝试领导，但没有给出理想的结果）

我的代码：

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.
 ),
),

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

2 个答案: