Dart 定制AppBar颤振

我正在努力实现以下目标，

我对弗利特很陌生，所以我想不出来。 我需要一个带有抽屉和动作的自定义AppBar，但要像图片一样排列

我在标题小部件中尝试了StackView

appBar: AppBar(
    title: Stack(
      children: <Widget>[
        Container(
          width: double.infinity,
          color: CustomColors.accentColor,
        ),
        Text(
          'Title',
          style: TextStyle(fontSize: 22.0, color: CustomColors.primaryDark),
        ),
      ],
    ),
  ),

appBar:appBar(
标题：堆栈(
儿童：[
容器(
宽度：double.infinity，
颜色：CustomColor.accentColor，
),
正文(
“头衔”，
样式：TextStyle（fontSize:22.0，颜色：CustomColor.primaryDark），
),
],
),
),

但是我得到了这样的东西

---

有人能帮我吗？谢谢。

正如我在评论中提到的，您可以创建一个自定义小部件，如您的图像附件，有很多方法可以做到这一点，这只是一个示例：

    class CustomBarWidget extends StatelessWidget {

      GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          key: _scaffoldKey,
          body: Container(
            height: 160.0,
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.red,
                  width: MediaQuery.of(context).size.width,
                  height: 100.0,
                  child: Center(
                    child: Text(
                      "Home",
                      style: TextStyle(color: Colors.white, fontSize: 18.0),
                    ),
                  ),
                ),
                Positioned(
                  top: 80.0,
                  left: 0.0,
                  right: 0.0,
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 20.0),
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(1.0),
                          border: Border.all(
                              color: Colors.grey.withOpacity(0.5), width: 1.0),
                          color: Colors.white),
                      child: Row(
                        children: [
                          IconButton(
                            icon: Icon(
                              Icons.menu,
                              color: Colors.red,
                            ),
                            onPressed: () {
                              print("your menu action here");
                              _scaffoldKey.currentState.openDrawer();
                            },
                          ),
                          Expanded(
                            child: TextField(
                              decoration: InputDecoration(
                                hintText: "Search",
                              ),
                            ),
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.search,
                              color: Colors.red,
                            ),
                            onPressed: () {
                              print("your menu action here");
                            },
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.notifications,
                              color: Colors.red,
                            ),
                            onPressed: () {
                              print("your menu action here");
                            },
                          ),
                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

class CustomBarWidget扩展了无状态Widget{
GlobalKey _scaffoldKey=GlobalKey（）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
钥匙：_scaffoldKey，
主体：容器(
身高：160.0，
子：堆栈(
儿童：[
容器(
颜色：颜色，红色，
宽度：MediaQuery.of（context）.size.width，
高度：100.0，
儿童：中心(
子：文本(
“家”，
样式：TextStyle（颜色：Colors.white，fontSize:18.0），
),
),
),
定位(
排名：80.0，
左：0.0，
右：0.0，
子：容器(
填充：边缘组。对称（水平：20.0），
孩子：装饰盒(
装饰：盒子装饰(
边界半径：边界半径。圆形（1.0），
边界：边界(
颜色：颜色。灰色。不透明度（0.5），宽度：1.0），
颜色：颜色。白色），
孩子：排(
儿童：[
图标按钮(
图标：图标(
图标菜单，
颜色：颜色，红色，
),
已按下：（）{
打印（“您的菜单操作在此”）；
_scaffoldKey.currentState.openDrawer（）；
},
),
扩大(
孩子：TextField(
装饰：输入装饰(
hintText:“搜索”，
),
),
),
图标按钮(
图标：图标(
Icons.search，
颜色：颜色，红色，
),
已按下：（）{
打印（“您的菜单操作在此”）；
},
),
图标按钮(
图标：图标(
图标、通知、，
颜色：颜色，红色，
),
已按下：（）{
打印（“您的菜单操作在此”）；
},
),
],
),
),
),
)
],
),
),
);
}
}

关于更多信息，我写了一篇关于如何定制AppBar的文章：

---

只需将整件东西包装在堆栈中即可。然后将AppBar定位为最后一个小部件，并位于某些小部件（如容器）之间，以便AppBar可以漂浮在它们上面

Widget setPage（）{
Color red800=Colors.red[800]；
返回堆栈(
儿童：[
容器（//背景
儿童：中心(
子项：文本（“主”，样式：TextStyle（fontSize:25.0，
fontWeight:fontWeight.w600，
颜色：颜色。白色），），），
颜色：红色800，
高度：MediaQuery.of（context）.size.height*0.2，
宽度：MediaQuery.of（context）.size.width，
),
Container（），//需要中间的一些小部件来浮动AppBar
已定位（//仅采用AppBar大小
排名：100.0，
左：20.0，
右图：20.0，
孩子：AppBar(
背景颜色：Colors.white，
前导：图标（Icons.menu，颜色：red800，），
主要：错误，
标题：文本字段(
装饰：输入装饰(
hintText:“搜索”，
边框：InputBorder.none，
hintStyle:TextStyle（颜色：Colors.grey）），
行动：[
图标按钮(
图标：图标（Icons.search，颜色：red800），按下时：（{}，），
图标按钮（图标：图标（图标.通知，颜色：red800），
onPressed:（）{}，）
],
),
)
],
);
}

屏幕截图：

为简单起见，我没有创建所需的UI，我只是想向您展示如何使用

PreferredSize

创建此类：

class CustomAppBar extends PreferredSize {
  final Widget child;
  final double height;

  CustomAppBar({@required this.child, this.height = kToolbarHeight});

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      color: Colors.orange,
      alignment: Alignment.center,
      child: child,
    );
  }
}

---

用法：

像任何其他

AppBar

一样使用它，但这次您可以设置

height

属性：

Scaffold(
  appBar: CustomAppBar(
    height: 120,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('One'),
        Text('Two'),
        Text('Three'),
        Text('Four'),
      ],
    ),
  ),
)

---

下面是我如何使用Stack和AppBar的PreferredSize创建它的。使用此选项，我们可以重用默认的AppBar属性，比如在主体中有ListView时，将AppBar粘贴在屏幕顶部

_appBar(height) => PreferredSize(
    preferredSize:  Size(MediaQuery.of(context).size.width, height+80 ),
    child: Stack(
      children: <Widget>[
        Container(     // Background
          child: Center(
            child: Text("Home", style: TextStyle(fontSize: 25.0,
                fontWeight: FontWeight.w600,
                color: Colors.white),),),
          color:Theme.of(context).primaryColor,
          height: height+75,
          width: MediaQuery.of(context).size.width,
        ),

        Container(),   // Required some widget in between to float AppBar

        Positioned(    // To take AppBar Size only
          top: 100.0,
          left: 20.0,
          right: 20.0,
          child: AppBar(
            backgroundColor: Colors.white,
            leading: Icon(Icons.menu, color: Theme.of(context).primaryColor,),
            primary: false,
            title: TextField(
                decoration: InputDecoration(
                    hintText: "Search",
                    border: InputBorder.none,
                    hintStyle: TextStyle(color: Colors.grey))),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search, color: Theme.of(context).primaryColor), onPressed: () {},),
              IconButton(icon: Icon(Icons.notifications, color: Theme.of(context).primaryColor),
                onPressed: () {},)
            ],
          ),
        )

      ],
    ),
  );

_appBar(height) => PreferredSize(
    preferredSize:  Size(MediaQuery.of(context).size.width, height+80 ),
    child: Stack(
      children: <Widget>[
        Container(     // Background
          child: Center(
            child: Text("Home", style: TextStyle(fontSize: 25.0,
                fontWeight: FontWeight.w600,
                color: Colors.white),),),
          color:Theme.of(context).primaryColor,
          height: height+75,
          width: MediaQuery.of(context).size.width,
        ),

        Container(),   // Required some widget in between to float AppBar

        Positioned(    // To take AppBar Size only
          top: 100.0,
          left: 20.0,
          right: 20.0,
          child: AppBar(
            backgroundColor: Colors.white,
            leading: Icon(Icons.menu, color: Theme.of(context).primaryColor,),
            primary: false,
            title: TextField(
                decoration: InputDecoration(
                    hintText: "Search",
                    border: InputBorder.none,
                    hintStyle: TextStyle(color: Colors.grey))),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search, color: Theme.of(context).primaryColor), onPressed: () {},),
              IconButton(icon: Icon(Icons.notifications, color: Theme.of(context).primaryColor),
                onPressed: () {},)
            ],
          ),
        )

      ],
    ),
  );

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar(AppBar().preferredSize.height),
      body: ListView(),
    );
})