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

Posted 2023-02-23

【中文标题】需要帮助调整 Flutter AppBar 的大小以适应 4 行文本和

【英文标题】：Need help resizing Flutter AppBar to fit 4 rows of text and

【发布时间】：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"),
                      // ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ));
  

【参考方案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);