Question

由于无法修改应用栏leading属性的宽度，我不得不使用AppBar title属性来创建自己的前导尾随属性。但是我注意到标题在那里有一些默认的水平填充。

Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Container(
      height: 36,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(width: 80, child: Text('Cancel')),
          Text('Profile'),
          Container(width: 80, child: Text('Done'))
        ],
      ),
    ),
      ),
    )

有什么方法可以缩小尺寸？

Answer 1

在应用栏中使用action []而不是使用Row。

  appBar: new AppBar(
      //title: new Text(Strings.app_name),
      actions: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: new RaisedButton(onPressed: (){

          },
            child: new Text('Cancel'),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: 
          new RaisedButton(onPressed: (){
            
          },child: new Text('done'),)
        ),
      ],
      //centerTitle:true,
    ),

Answer 2

您可以使用AppBar的titleSpacing属性来控制标题的水平间距。

例如，以下代码段将删除标题中的所有前导空格-

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0.0,
        title: const Text('AppBar Demo'),
      ),
      body: const Center(
        child: Text(
          'This is the home page',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

我希望这会有所帮助！

Answer 3

请使用titleSpacing：0.0

appBar: AppBar(
    titleSpacing: 0.0,
    title: Text('AppBar Example'),
  ),

更改AppBar标题填充

3 个答案: