繁体   English   中英

为应用栏中的文本添加填充

[英]Add padding to text in appbar

如何在SliverAppBar中为文本添加填充?

效果图

此代码不起作用:

SliverAppBar(
 title: Padding(
  padding: EdgeInsets.only(top: 100),
  child: Text('text'),
  )
)

如果您将内边距设置为大于SilverAppBar的高度,则文本将不可见。 一种解决方法是将标题添加到SilverAppBarbottom

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxScrolled) {
            return <Widget>[
              SliverAppBar(
                pinned: true,
                bottom: PreferredSize(
                  preferredSize: Size.fromHeight(60.0),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                          'Tabs demo',
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 30),
                        )),
                  ),
                ),
              )
            ];
          },
          body: ...
      )
    );
  }

结果:

资源

像这样使用SliverAppBar和 padding 就像一个魅力:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: 'NiklasLehnfeld',
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Padding(
                padding: const EdgeInsets.only(top: 30.0),
                child: Text("Niklas Lehnfeld"),
              ),
              leading: Icon(Icons.menu),
            )
          ],
        ),
      )));
}

如果它仍然不起作用,请提供更多代码,您如何在您身边集成“SliverAppBar”。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM