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

问题描述

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

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

迈克

解决方案

这还没有实现.

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

请记住，这不是最佳选择.因为它需要硬编码图标和东西的大小.由于 FlexibleSpacebar 没有宽度限制.

import 'package:flutter/material.dart';导入包:cloud_firestore/cloud_firestore.dart"；导入包:flutter_project/materialSheet.dart"；无效的主要()=>运行应用程序(新的我的应用程序())；MyApp 类扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回新的 MaterialApp(标题:颤振演示"，主题:新主题数据(primarySwatch:颜色.蓝色，),家:新的我的主页()，);}}类 MyHomePage 扩展 StatefulWidget {@覆盖_MyHomePageState createState() =>新 _MyHomePageState();}类 _MyHomePageState 扩展状态<MyHomePage>{@覆盖小部件构建(BuildContext 上下文){返回脚手架(正文:自定义滚动视图(条子:<小部件>[SliverMultilineAppBar(标题:东京和京都的夏季之旅"，领先:图标按钮(onPressed: () {},图标:图标(图标.menu)，),动作:<小部件>[图标按钮(onPressed: () {},图标:图标(图标.搜索)，),图标按钮(onPressed: () {},图标:图标(Icons.more_vert)，),],),],),);}}类 SliverMultilineAppBar 扩展 StatelessWidget {最终字符串标题；最终 Widget 领先；最终列表<小部件>行动；SliverMultilineAppBar({this.title, this.leading, this.actions});@覆盖小部件构建(BuildContext 上下文){最终 mediaQuery = MediaQuery.of(context);双可用宽度 = mediaQuery.size.width - 160;如果(动作！= null){availableWidth -= 32 * actions.length;}如果(前导！= null){可用宽度-= 32；}返回 SliverAppBar(扩展高度:120.0，forceElevated:真，领先:领先，行动:行动，弹性空间:弹性空间条(标题:约束框(约束:BoxConstraints(最大宽度:可用宽度，),孩子:文本(标题，textScaleFactor:.8，)，),),);}}

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.

Mike

解决方案

This is not implemented yet.

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

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屋！