如何在 Flutter 中创建带有底部彩色边框的 AppBar？

Posted 2023-02-23

【中文标题】如何在 Flutter 中创建带有底部彩色边框的 AppBar？

【英文标题】：How to create an AppBar with a bottom coloured border in Flutter?

【发布时间】：2019-04-22 21:54:30

【问题描述】：

我想创建一个像这样的应用栏，它有一个底部边框和一个可以使用高度来完成的阴影。有人可以提供一个示例代码 sn-p 来实现这个

【参考方案1】：

可能是这样的

AppBar(
   bottom: PreferredSize(
      child: Container(
         color: Colors.orange,
         height: 4.0,
      ),
      preferredSize: Size.fromHeight(4.0)),
   )

【参考方案2】：

如果您想要一个真正可定制的设计，理想情况下您应该制作自己的应用栏。示例：

class MyAppbar extends StatelessWidget implements PreferredSizeWidget 
  final Widget title;

  const MyAppbar(Key key, this.title) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Material(
      elevation: 26.0,
      color: Colors.white,
      child: Container(
        padding: const EdgeInsets.all(10.0),
        alignment: Alignment.centerLeft,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.deepOrange,
              width: 3.0,
              style: BorderStyle.solid,
            ),
          ),
        ),
        child: title,
      ),
    );
  

  final Size preferredSize = const Size.fromHeight(kToolbarHeight);

【参考方案3】：

如果你只想在 AppBar 底部使用一个小部件，我就是这样做的：

appBar: AppBar(
        title: Text('Soroush!'),
        bottom: PreferredSize(
            child: Container(
              color: Colors.white,
              child: TextFormField(),
            ),
            preferredSize: Size.fromHeight(kToolbarHeight)),

【参考方案4】：

现在 AppBar 中有一个 shadowColor 属性，您可以像这样轻松使用它：

AppBar( shadowColor : Colors.blue )

【参考方案5】：

AppBar(elevation: 1, backgroundColor:Colors.orange,)

【讨论】：

您能否提供一些上下文来解释您的代码以及您的答案为何有效？

【参考方案6】：

您可以使用 AppBar 的 shape 属性来实现：

AppBar(
  shape: Border(
    bottom: BorderSide(
      color: Colors.orange,
      width: 4
    )
  ),
  elevation: 4,
  /* ... */
)