扩展Flutter中的应用程序栏以允许多行标题?

9bfwbjaz  于 2023-01-02  发布在  Flutter
关注(0)|答案(7)|浏览(121)

有人知道我如何创建一个多行标题的应用程序栏吗,按照这里显示的材料指南?
https://material.io/design/components/app-bars-top.html#anatomy

有什么想法如何做到这一点吗?它似乎应该是直截了当的,因为它的一部分材料准则!值得指出的是,标题是用户定义的,所以我想让应用程序栏扩大,从单行到多行(也许有一个限制强加)取决于用户输入.
迈克

vcirk6k6

vcirk6k61#

这一点尚未落实。
但是,使用为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,),
        ),
      ),
    );
  }
}
jdzmm42g

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,
      ),
3b6akqbq

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
            ),

nwo49xxi

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("..."),
  );
}
hjqgdpho

hjqgdpho5#

这段代码将创建一个自定义的ScaffoldAppBar支持不接收标题、接收标题以及接收标题和副标题。如果您不提供标题,它将显示给定的文本(在本例中,应用的名称),而如果您设置了标题和副标题,它将使用两行样式和正确的Material Design文本样式。

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));
  }
}
vwhgwdsa

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(...),
    ),
  ),
km0tfn4u

km0tfn4u7#

找到了一些textPainter的解决方案,根据文本的样式和屏幕宽度计算文本高度,并将其传递给AppBartoolbarHeight

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());
  }
}

相关问题