展开Flutter中的“应用程序"栏以允许多行标题? [英] Expand The App bar in Flutter to Allow Multi-Line Title?

问题描述

根据此处显示的材料指南，有人知道我如何创建带有多行标题的应用栏吗?

Does anyone know how I can create an app bar with a multi-line title, as per the material guidelines show here?

https://material.io/design/components/app- bars-top.html#anatomy

任何想法如何做到这一点?鉴于它是材料指南的一部分，因此似乎应该很简单！值得指出的是标题是用户定义的，因此我想允许应用程序栏根据用户输入从单行扩展到多行(可能有限制).

Any ideas how to do this? It seems like it should be straightforward given that it's part of the material guidelines! Worth pointing out that the title is user defined, so I want to allow the app bar to expand from a single line to multiple lines (perhaps with a limit imposed) depending on user input.

迈克

推荐答案

尚未实现.

但是，通过使用为CustomScrollView设计的SliverAppBar，您可以获得类似的结果.

However you can achieve similar results by using SliverAppBar designed for CustomScrollView.

请记住，这并不是最佳选择.由于需要对图标和内容的大小进行硬编码.由于FlexibleSpacebar没有宽度限制.

Bear in mind that this is not optimal though. As it required hard coding the size of the icons and stuff. Due to FlexibleSpacebar not having width constraint.

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter_project/materialSheet.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverMultilineAppBar(
            title: "Summer Trip to Tokyo and Kyoto",
            leading: IconButton(
              onPressed: () {},
              icon: Icon(Icons.menu),
            ),
            actions: <Widget>[
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.search),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.more_vert),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class SliverMultilineAppBar extends StatelessWidget {
  final String title;
  final Widget leading;
  final List<Widget> actions;

  SliverMultilineAppBar({this.title, this.leading, this.actions});

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    double availableWidth = mediaQuery.size.width - 160;
    if (actions != null) {
      availableWidth -= 32 * actions.length;
    }
    if (leading != null) {
      availableWidth -= 32;
    }
    return SliverAppBar(
      expandedHeight: 120.0,
      forceElevated: true,
      leading: leading,
      actions: actions,
      flexibleSpace: FlexibleSpaceBar(
        title: ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: availableWidth,
          ),
          child: Text(title, textScaleFactor: .8,),
        ),
      ),
    );
  }
}

这篇关于展开Flutter中的“应用程序"栏以允许多行标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！