flutter - 如何将多个文本值添加到 appbar Flutter

Question

我是 Flutter 的新手，想创建一个具有 2 个不同文本值的应用栏，请参见下文：

到目前为止，我已经编写了以下代码：

    class HomePage extends StatelessWidget {
  final double toolbarOpacity = 2.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
      PreferredSize(
        preferredSize: Size(double.infinity, 114),
        child: AppBar(
          centerTitle: false,
          title: Text(
            'My App',
            style: TextStyle(
                color: titleTextColor,
                fontWeight: titleTextFontWeight,
                fontFamily: titleFontFamily,
                fontSize: titleFontSize),
          ),
           backgroundColor: Color.fromRGBO(232, 232, 242, 1),
        ),
      ),
    );
  }
}

这给了我以下结果：

有人可以指导我材料或帮助我实现我想要的输出吗？

提前致谢。

Answer 1

由于标题接受小部件，您可以像这样在其中使用列小部件

AppBar(
          centerTitle: false,
          title: Column(
            children: <Widget>[
                Text(
                'My App',
                style: TextStyle(
                    color: titleTextColor,
                    fontWeight: titleTextFontWeight,
                    fontFamily: titleFontFamily,
                    fontSize: titleFontSize),
              ),
              Text("My second text"),
            ]
           )
           backgroundColor: Color.fromRGBO(232, 232, 242, 1),
        ),

你可以使用 PreferredSize 来定义大小

appBar:
      PreferredSize(
        preferredSize: Size(double.infinity, 114),
        child: AppBar(
          centerTitle: false,
          title: Column(
            children: <Widget>[
                Text(
                'My App',
                style: TextStyle(
                    color: titleTextColor,
                    fontWeight: titleTextFontWeight,
                    fontFamily: titleFontFamily,
                    fontSize: titleFontSize),
              ),
              Text("My second text"),
            ]
           )
           backgroundColor: Color.fromRGBO(232, 232, 242, 1),
        ),
      ),

Answer 2

您是否尝试过放置一个 Column 小部件作为标题，其中两个孩子是两个这样的 Text 小部件（我现在无法测试代码，但它应该是这样的）：

class HomePage extends StatelessWidget {
  final double toolbarOpacity = 2.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
      PreferredSize(
        preferredSize: Size(double.infinity, 114),
        child: AppBar(
          centerTitle: false,
          title: Column(
            children: <Widget>[
                Text(
                'My App',
                style: TextStyle(
                    color: titleTextColor,
                    fontWeight: titleTextFontWeight,
                    fontFamily: titleFontFamily,
                    fontSize: titleFontSize),
              ),
              Text("My second text"),
            ]
           )
           backgroundColor: Color.fromRGBO(232, 232, 242, 1),
        ),
      ),
    );
  }
}

Answer 3

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          backgroundColor:Colors.amber,
        appBar: PreferredSize(
            preferredSize: Size(double.infinity, 114),
            child: AppBar(
              backgroundColor: Color(0xfff7f7fb),
              flexibleSpace: Padding(
                  padding:EdgeInsets.all(10),
                  child:Column( 
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height:20),
                    Text("Monday 3rd August 2020",
                        style:
                            TextStyle(color: Color(0xff59595a), fontSize: 15)),
                    Expanded(
                        child: Container(
                            alignment:Alignment.centerLeft,
                            child: Text("My App",
                                style: TextStyle(
                                    color: Colors.black, fontSize: 25))))
                  ])
                  ),
            )),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

您可以在此处查看实时预览：在此处输入链接描述