Flutter中如何减少AppBar的标题空间答案

【问题标题】：How to reduce the title space of AppBar in FlutterFlutter中如何减少AppBar的标题空间
【发布时间】：2018-05-08 17:47:12
【问题描述】：

我已经在 AppBar 的构造函数中覆盖了titleSpacing。但标题空间没有区别。

new AppBar(

backgroundColor: Colors.amber,
title: new Text("Flying Dutchman",
  style: new TextStyle(
    color: const Color(0xFF444444),
    fontSize: 30.0,
    fontWeight: FontWeight.w900,
  ),
),
titleSpacing: 0.00,
centerTitle: true,
elevation: 0.0,
)

我希望减少应用栏标题的顶部空间。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

titleSpacing 与实际的应用栏高度和顶部填充无关。就是横轴上的间距。

AppBar 是一个遵循material 规则的预样式化组件。

如果您不喜欢这些规则，请不要使用AppBar 开头。去创建你自己的组件吧！ :)

这是一个实现示例：

class MyAppbar extends StatelessWidget implements PreferredSizeWidget {
  final String title;

  const MyAppbar({this.title});

  @override
  Widget build(BuildContext context) {
    return new Container(
        color: Colors.amber,
        height: preferredSize.height,
        child: new Center(
          child: new Text(title),
        ),
      );
  }

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

【讨论】：

谢谢雷米。它工作正常。但我必须在我的屏幕中添加 TabBar。这就是我添加 AppBar 的原因。我无法重写整个代码来将我的标签栏放在这个MyAppBar 上。有没有其他方法可以减小尺寸，或者我可以在没有 AppBar 的情况下添加 TabBar？
TabBar 只是一个小部件，就像任何其他小部件一样。它不需要与Appbar 一起使用。您可以在我的示例中添加 TabBar。
谢谢，雷米。工作正常。我已将 TabBar 添加到 MyAppBar。
如此简单，但正是我需要的！

【解决方案2】：

只需将转换作为文本视图的根，并在 nagtive 中提供 x 值。

new AppBar(

  backgroundColor: Colors.amber,
  title:new Transform(
            transform: new Matrix4.translationValues(-20.0, 0.0, 0.0),
            child: new Text("Flying Dutchman",
            style: new TextStyle(
                   color: const Color(0xFF444444),
                   fontSize: 30.0,
                   fontWeight: FontWeight.w900,
                   ),
             ),
           ),
 titleSpacing: 0.00,
 centerTitle: true,
 elevation: 0.0,
)

【讨论】：