firebase - 如何使用出现在另一个小部件中？

Question

我试图在另一个小部件中使用 appbar 小部件，以便我的代码更清晰。但问题是我该怎么做？

这是我的应用栏小部件：

class thisappbar extends StatelessWidget {
  thisappbar(this.isMe, this.username, {this.key});

  final Key key;
  final bool isMe;
  String username;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        flexibleSpace: SafeArea(
          child: Container(
            padding: EdgeInsets.only(right: 16),
            child: Row(
              children: <Widget>[
                IconButton(
                  onPressed: (){
                    Navigator.pop(context);
                  },
----------

这是我想使用它的方式：

class ChatScreen extends StatelessWidget {

  static const route = '/messages';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(thisappbar(),
      ),
      body: Container(
          child: Column(
        children: <Widget>[
          Expanded(child: Messages()),
          NewMessage(),
        ],
      )),
    );
  }
}

希望有人能帮忙谢谢！

这是我的方法在编辑用户 @Steve Nosse 的一些更改后首先显示在应用栏小部件上的方式：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  CustomAppBar({this.key, this.isMe, this.username}) : super(key: key);

  final Key key;
  final bool isMe;
  String username;
  @override
  Widget build(BuildContext context) {
    /// Build you AppBar widget here
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        flexibleSpace: SafeArea(
          child: Container(
            padding: EdgeInsets.only(right: 16),
            child: Row(
              children: <Widget>[
                IconButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  icon: Icon(Icons.arrow_back, color: Colors.black,),
                ),
                SizedBox(width: 2,),
                CircleAvatar(
                  backgroundImage: NetworkImage(
                      'https://randomuser.me/api/portraits/men/5.jpg'),
                  maxRadius: 20,
                ),
                SizedBox(width: 12,),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        username, style: TextStyle(
                          fontSize: 16, fontWeight: FontWeight.w600),),
                      SizedBox(height: 6,),
                      Text("Online", style: TextStyle(
                          color: Colors.grey.shade600, fontSize: 13),),
                    ],
                  ),
                ),
                Icon(Icons.settings, color: Colors.black54,),
              ],
            ),
          ),
        ),
      ),


    );
  }

  @override
  Size get preferredSize => Size.fromHeight(56);
}

这里是我使用 appbar 小部件的地方：

class ChatScreen extends StatelessWidget {

  static const route = '/messages';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(),
      body: Container(
          child: Column(
        children: <Widget>[
          Expanded(child: Messages()),
          NewMessage(),
        ],
      )),
    );
  }
}

这是错误：

======== Exception caught by widgets library =======================================================
The following assertion was thrown building CustomAppBar(dirty):
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 378 pos 10: 'data != null'

The relevant error-causing widget was: 
  CustomAppBar file:///Users/name/StudioProjects/project/lib/seitenleiste/nachrichten.dart:390:15
When the exception was thrown, this was the stack: 
#2      new Text (package:flutter/src/widgets/text.dart:378:10)
#3      CustomAppBar.build (package:project/seitenleiste/nachrichten.dart:357:23)
#4      StatelessElement.build (package:flutter/src/widgets/framework.dart:4646:28)
#5      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4572:15)
#6      Element.rebuild (package:flutter/src/widgets/framework.dart:4265:5)
...

标签： firebaseflutter

Answer 1

你可以试试这个：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
    CustomAppBar({this.key, this.isMe, this.username}) : super(key: key);

    final Key key;
    final bool isMe;
    String username;
    
    @override
    Widget build(BuildContext context) {
        /// Build you AppBar widget here
        return Container();
    }

    @override
    Size get preferredSize => Size.fromHeight(56);
}

与任何其他类一样，您的 CustomAppBar 可以设计为从外部获取参数来构建自己。

它实现的事实PreferredSizeWidget使我们可以轻松地将其用作 Scaffold 小部件的 appBar 属性的参数。