如何在flutter项目的App Bar中覆盖自定义padding？

Question

我的代码给我这样的输出。

但我想在我的appbar中实现这个左边的padding。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        brightness: Brightness.light,
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        leading: Padding(
          padding: const EdgeInsets.only(left: 0),
          child: Container(
            width: 56,
            height: 56,
            padding: const EdgeInsets.all(8.0),
            child: Ink(
                child: IconButton(
                    icon: Icon(Icons.menu), iconSize: 16.0, onPressed: null),
                decoration: BoxDecoration(
                  color: Colors.grey.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20.0),
                )),
          ),
        ),
        actions: [
          Padding(
            padding: EdgeInsets.only(right: 48.0),
            child: Container(
              width: 56,
              height: 56,
              padding: const EdgeInsets.all(8.0),
              child: Ink(
                  child: IconButton(
                      icon: Icon(Icons.shopping_cart), iconSize: 16.0, onPressed: null),
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(20.0),
                  )),
            ),
          )
        ],
      ),
      body: Center(),
    );
  }
}

Answer 1

在这种情况下，你可以使用一个自定义的应用栏，即 "我的应用栏"。appBar 中的财产 Scaffold 小部件实现了一个 PreferredSizeWidget因此，我们需要使用一个实现同一个类的widget，这个类是 PreferredSize:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        // You can set the size here, but it's left to zeros in order to expand based on its child.
        preferredSize: const Size(0, 0),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Icon(Icons.account_box),
              Icon(Icons.account_circle),
            ],
          ),
        ),
      ),
      body: Container(),
    );
  }

Answer 2

这个代码帮助我实现了上述结果。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
        preferredSize: const Size(0, 96),
        child: Padding(
          padding: const EdgeInsets.only(left: 40, right: 40),
          child: AppBar(
            brightness: Brightness.light,
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            leading: Padding(
              padding: const EdgeInsets.only(left: 0),
              child: Container(
                width: 56,
                height: 56,
                padding: const EdgeInsets.all(8.0),
                child: Ink(
                    child: IconButton(
                        icon: Icon(Icons.menu, color: Colors.black,), iconSize: 20.0 ,onPressed: null),
                    decoration: BoxDecoration(
                      color: Colors.grey.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(20.0),
                    )),
              ),
            ),
            actions: [
              Container(
                width: 56,
                height: 56,
                padding: const EdgeInsets.all(8.0),
                child: Ink(
                    child: IconButton(
                        icon: Icon(Icons.archive, color: Colors.black,), iconSize: 20.0, onPressed: null),
                    decoration: BoxDecoration(
                      color: Colors.grey.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(20.0),
                    )),
              ),
            ],
          ),
        ),
      ),
      body: Row(
        children: [

        ],
      )
    );
  }
}