需要帮助调整 Flutter AppBar 的大小以适应 4 行文本和答案

【问题标题】：Need help resizing Flutter AppBar to fit 4 rows of text and需要帮助调整 Flutter AppBar 的大小以适应 4 行文本和
【发布时间】：2020-09-24 05:40:14
【问题描述】：

我无法调整 AppBar 的大小以适应 4 行文本（姓名、街道地址、城市/州/邮编、电话号码）。

这是页面代码和截图；注意第三行的剪裁。

import 'package:appvervemenu/http_service.dart';
import 'package:appvervemenu/post_detail.dart';
import 'package:appvervemenu/post_model.dart';
import 'package:flutter/material.dart';

class PostsPage extends StatelessWidget {
  final HttpService httpService = HttpService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(200.0),
        child: AppBar(
            automaticallyImplyLeading: false,
            centerTitle: true,
            title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("name\nstreet\ncity state zip"),
                ])),
      ),
      body: FutureBuilder(
        future: httpService.getPosts(),
        builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot) {
          if (snapshot.hasData) {
            List<Post> posts = snapshot.data;
            return ListView(
              children: posts
                  .map(
                    (Post post) => ListTile(
                      title: Text(post.title),
                      subtitle: Text("${post.userId}"),
                      onTap: () => Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => PostDetail(
                            post: post,
                          ),
                        ),
                      ),
                    ),
                  )
                  .toList(),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

跟进...

这是第一次修复的结果。

import 'package:appvervemenu/post_model.dart';
import 'package:flutter/material.dart';

class CustomAppBar extends PreferredSize {

  final Widget child;
  final double height;

  CustomAppBar({@required this.child, this.height = kToolbarHeight});

  @override
  Size get preferredSize => Size.fromHeight(height);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      color: Colors.red,
      alignment: Alignment.center,
      child: child,
    );
  }
}

class PostDetail extends StatelessWidget {
  final Post post;

  PostDetail({@required this.post});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // appBar: AppBar(
          // title: Text(post.title),
          // title: Text("${post.userId}"),
        // ),
        appBar: CustomAppBar(
          height: 200,
          child: Column(
            
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Name'),
              Text('Street'),
              Text('City Sate Zip'),
              Text('Phone'),
              Text('Hours'),
              Text('\n\nLOGO\n${post.userId}'),
            ],
          ),
    ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              children: <Widget>[
                Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      ListTile(
                        title: Text(post.title),
                        // subtitle: Text(post.title),
                      ),
                      ListTile(
                        title: Text("Featuring"),
                        subtitle: Text(post.body),
                      ),
                      ListTile(
                        // title: Text("ID"),
                        subtitle: Text("${post.id}"),
                      ),
                      // ListTile(
                        // title: Text("User ID"),
                        // subtitle: Text("${post.userId}"),
                      // ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

【问题讨论】：

标签： flutter mobile resize screenshot appbar

【解决方案1】：

截图：

使用preferredSize属性：

Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(120),
    child: Container(
      color: Colors.orange,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('One'),
          Text('Two'),
          Text('Three'),
          Text('Four'),
        ],
      ),
    ),
  ),
)

【讨论】：

【解决方案2】：

For custom appbar,

const _appBarCategoryHeight = 170.0;

var appBar = AppBar(
      brightness: Brightness.light,
      elevation: 0.0,
      titleSpacing: 0.0,
      bottom: PreferredSize(
        preferredSize: Size(
          MediaQuery.of(context).size.width,
          _appBarCategoryHeight,
        ),
        child: Container(
          child: Column(
            children: [
              ListTile(
                title: Text("One"),
              ),
              ListTile(
                title: Text("Two"),
              ),
              ListTile(
                title: Text("Three"),
              ),
            ],
          ),
        ),
      ),
    );

【讨论】：

【解决方案3】：

现在您可以使用首选尺寸获得appBar 的高度：

double height = appBar.preferredSize.height;

您可以使用此高度来降低屏幕高度。

final double height = MediaQuery.of(context).size.height;

AppBar 的固定高度为 56。您应该创建自己的应用栏来实现 PreferredSizeWidget

class TestAppBar extends StatelessWidget implements PreferredSizeWidget {
 @override
 Widget build(BuildContext context) {
    return AppBar(
      title: Text('TEST'),
      centerTitle: true,
    );
  }

 @override
 Size get preferredSize => Size.fromHeight(34);
}

【讨论】：