flutter 如何在scaffold中增加AppBar的大小？

e5njpo68 于 2022-11-17 发布在 Flutter

关注(0)|答案(3)|浏览(168)

当我尝试添加更多小部件时，我的应用栏溢出。在某个点之前还可以，然后我想添加一些上下填充，然后它溢出了。有什么方法可以增加应用栏大小吗？
我在文档中看到了属性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: (...)
     ,);
 } }

flutter

来源：https://stackoverflow.com/questions/56256745/how-to-increase-the-size-of-the-appbar-in-scaffold

3条答案

按热度按时间

bgtovc5b1#

创建自定义应用程序栏，如下所示

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,
    );
  }
}

赞(0）回复(0）举报 2022-11-17

xriantvc2#

您可以这样做：

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

赞(0）回复(0）举报 2022-11-17

34gzjxbg3#

在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: ...

赞(0）回复(0）举报 2022-11-17

我来回答

flutter 如何在scaffold中增加AppBar的大小？

3条答案

相关问题

热门标签

最新问答