有人知道我如何创建一个多行标题的应用程序栏吗,按照这里显示的材料指南?https://material.io/design/components/app-bars-top.html#anatomy
有什么想法如何做到这一点吗?它似乎应该是直截了当的,因为它的一部分材料准则!值得指出的是,标题是用户定义的,所以我想让应用程序栏扩大,从单行到多行(也许有一个限制强加)取决于用户输入.迈克
vcirk6k61#
这一点尚未落实。但是,使用为CustomScrollView设计的SliverAppBar可以获得类似的结果。请记住,这并不是最佳的。因为它需要硬编码的大小图标和东西。由于FlexibleSpacebar没有宽度限制。
CustomScrollView
SliverAppBar
FlexibleSpacebar
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,), ), ), ); } }
jdzmm42g2#
您可以使用RichText:
SliverAppBar( flexibleSpace: FlexibleSpaceBar( background: Container( color: Colors.indigoAccent, ), title: RichText( text: TextSpan(children: [ TextSpan( text: Constants.homePageTitle, style: textTheme.headline, ), TextSpan(text: "\n"), TextSpan( text: Constants.homePageSubtitle, style: textTheme.subtitle, ) ]), ), titlePadding: EdgeInsets.only(left: 10, bottom: 20), ), floating: true, backgroundColor: Colors.greenAccent, expandedHeight: 150.0, ),
3b6akqbq3#
尝试下面的代码。这将给予多行,你也可以控制文本样式。使用文本,而不是RichText,如果你不想所有行不同的样式。
AppBar( title: RichText( textAlign: TextAlign.center, text: TextSpan( text: "Developer Developer", style: TextStyle(fontSize: 20), children: <TextSpan>[ TextSpan( text: '\nTrip List', style: TextStyle( fontSize: 16, ), ), ] ), ), backgroundColor: MissionGPSTheme.themeBlueColor ),
nwo49xxi4#
AppBar可以让您接近这个目标,但是您必须根据文本长度指定底部PreferredSize小部件的高度,这并不理想。
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.deepPurple, leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}), actions: <Widget>[ IconButton(icon: Icon(Icons.search), onPressed: () {}), IconButton(icon: Icon(Icons.more_vert), onPressed: () {}), ], bottom: PreferredSize( child: Padding( padding: const EdgeInsets.fromLTRB(80.0, 0.0, 80.0, 16.0), child: Text( "Summer Trip to Tokyo and Kyoto", style: TextStyle( color: Colors.white, fontSize: 24.0, ), ), ), preferredSize: Size(0.0, 80.0), ), ), body: Text("..."), ); }
hjqgdpho5#
这段代码将创建一个自定义的Scaffold,AppBar支持不接收标题、接收标题以及接收标题和副标题。如果您不提供标题,它将显示给定的文本(在本例中,应用的名称),而如果您设置了标题和副标题,它将使用两行样式和正确的Material Design文本样式。
Scaffold
AppBar
import 'package:flutter/material.dart'; class TwoLinesAppBarScaffold extends StatelessWidget { final Widget body; final String title; final String subtitle; TwoLinesAppBarScaffold({this.body, this.title = "QuitNow!", this.subtitle}); @override Widget build(BuildContext context) { Widget widget; if (subtitle == null) { widget = Text(title); } else { widget = RichText( textAlign: TextAlign.start, text: TextSpan( text: title, style: TextStyle( fontSize: 20, fontWeight: FontWeight.w500, ), children: <TextSpan>[ TextSpan( text: '\n$subtitle', style: TextStyle( fontSize: 16, fontWeight: FontWeight.normal, ), ), ]), ); } return Scaffold( appBar: AppBar( title: widget, ), body: Center(child: body)); } }
vwhgwdsa6#
这可以通过将AppBar的“title”属性替换为“flexibleSpace”来实现:
Scaffold( appBar: AppBar( flexibleSpace: Center( child: Column( children: [ Text('Title Line One'), Text('Title Line Two'), ], ), ), ), body: body ),
如果由于高度而发生溢出,只需使用PreferredSize小部件 Package AppBar,并将高度设置为比默认值更高的值:
Scaffold( appBar: PreferredSize( preferredSize: Size.fromHeight(100), child: AppBar(...), ), ),
km0tfn4u7#
找到了一些textPainter的解决方案,根据文本的样式和屏幕宽度计算文本高度,并将其传递给AppBartoolbarHeight
toolbarHeight
class AppBarHeightCalc { String title; double width; AppBarHeightCalc({ required this.title, required this.width, }); double horizontalPadding = 32; double actionsWidth = 48; final style = TextStyle(fontSize: 26); double calculateHeight() { TextPainter textPainter = TextPainter() ..text = TextSpan(text: title, style: style) ..textDirection = TextDirection.ltr ..layout(minWidth: 0, maxWidth: width - horizontalPadding); return (textPainter.size.height); } double calculateHeightWithActions() { TextPainter textPainter = TextPainter() ..text = TextSpan(text: title, style: style) ..textDirection = TextDirection.ltr ..layout(minWidth: 0, maxWidth: width - actionsWidth - horizontalPadding); return (textPainter.size.height); } } class AppBarExample extends StatelessWidget { const AppBarExample({super.key}); @override Widget build(BuildContext context) { String title = 'Lorem ipsum dolor sit amet. 33 nostrum neque qui possimus fugit ex fugiat'; double screenWidth = MediaQuery.of(context).size.width; final appBarHeight = AppBarHeightCalc(title: title, width: screenWidth); return Scaffold( appBar: AppBar( title: Text( title, maxLines: 3, ), toolbarHeight: appBarHeight.calculateHeight(), ), body: Center()); } }
7条答案
按热度按时间vcirk6k61#
这一点尚未落实。
但是,使用为
CustomScrollView
设计的SliverAppBar
可以获得类似的结果。请记住,这并不是最佳的。因为它需要硬编码的大小图标和东西。由于
FlexibleSpacebar
没有宽度限制。jdzmm42g2#
您可以使用RichText:
3b6akqbq3#
尝试下面的代码。这将给予多行,你也可以控制文本样式。使用文本,而不是RichText,如果你不想所有行不同的样式。
nwo49xxi4#
AppBar可以让您接近这个目标,但是您必须根据文本长度指定底部PreferredSize小部件的高度,这并不理想。
hjqgdpho5#
这段代码将创建一个自定义的
Scaffold
,AppBar
支持不接收标题、接收标题以及接收标题和副标题。如果您不提供标题,它将显示给定的文本(在本例中,应用的名称),而如果您设置了标题和副标题,它将使用两行样式和正确的Material Design文本样式。vwhgwdsa6#
这可以通过将AppBar的“title”属性替换为“flexibleSpace”来实现:
如果由于高度而发生溢出,只需使用PreferredSize小部件 Package AppBar,并将高度设置为比默认值更高的值:
km0tfn4u7#
找到了一些textPainter的解决方案,根据文本的样式和屏幕宽度计算文本高度,并将其传递给
AppBar
toolbarHeight