如何将小部件定位在自定义应用栏 Flutter 的中间

Question

编辑： 我希望图标进入我创建的圆圈，但我现在似乎成功使用 Stack 和 Positioned:

actions: <Widget>[
        Stack(
          children: [
            Positioned(
              child: CircleAvatar(
                backgroundImage: AssetImage("assets/images/person.jpeg"),
                radius: 30,
                key: Key("1"),
              ),
              top: height,
              right: width/2,
            ),
            Padding(
              padding: EdgeInsets.only(),
            )
          ],

宽和高在哪里

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

原版POST: 所以我一直在尝试在 flutter 中制作一个自定义应用栏，但是我想在页面中间显示的图像并没有出现在我需要的地方。

这是我目前所拥有的，我想要的是显示在应用栏中心的图像（width/2 - 半径）和全高（高度 - 半径）。

https://i.stack.imgur.com/eyZGN.png

感谢您的帮助！！

class ProfileAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String name;
  ProfileAppBar({this.name});
  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
  @override
  Widget build(BuildContext context) {
    final double height = MediaQuery.of(context).size.height;
    final double width = MediaQuery.of(context).size.width;

    return AppBar(
      shape: CustomShapeBorder(),
      leading: Row(
        children: [
          IconButton(
            icon: Icon(Icons.home),
            onPressed: () {
              Navigator.pushReplacementNamed(context, "/home");
            },
          ),
        ],
      ),
      title: Text(name ?? 'Username'),
      actions: <Widget>[
        Padding(
          child: CircleAvatar(
            backgroundImage: AssetImage("assets/images/person.jpeg"),
            radius: 30,
            key: Key("1"),
          ),
          padding: EdgeInsets.only(right: width / 4 + 20),
        ),
        IconButton(
          iconSize: 30,
          icon: Icon(Icons.settings),
          alignment: Alignment.centerRight,
          padding: EdgeInsets.only(right: 20),
          onPressed: () {
            final profileRoute = "/profile";
            bool isNewRouteSameAsCurrent = false;

            Navigator.popUntil(context, (route) {
              if (route.settings.name == profileRoute) {
                isNewRouteSameAsCurrent = true;
              }
              return true;
            });

            if (!isNewRouteSameAsCurrent) {
              Navigator.pushReplacementNamed(context, profileRoute);
            }
          },
        )
      ],
    );
  }
}

class CustomShapeBorder extends ContinuousRectangleBorder {
  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    Path path = Path();
    path.lineTo(0, rect.height);

    path.lineTo(rect.width, rect.height);
    path.lineTo(rect.width, 0);
    path.addOval(
      Rect.fromCircle(
        center: Offset(rect.width / 2, rect.height),
        radius: 40,
      ),
    );
    path.addOval(
      Rect.fromCircle(
        center: Offset(rect.width / 2, rect.height),
        radius: 40,
      ),
    );

    return path;[enter image description here][1]
  }
}

Answer 1

关于你的问题的一个问题。您只想将图像置于应用栏的中央，还是将其放置在您为应用栏创建的圆形自定义形状内？

如果您只是想将图像居中，我会将具有用户名的当前应用栏标题移动到前导小部件，并使用一行来包含这些元素。然后我将圆形头像作为应用栏的标题并将 centerTitle 属性设置为 true 以使其在中间居中放置图像。

如果你想以其他方式放置它，你将不得不使用一个堆栈和一个定位的小部件来相应地调整它的位置

Answer 2

您可以用 Stack

包裹整个 AppBar

Stack(
        children: [
          AppBar(
            shape: CustomShapeBorder(),
            leading: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.home),
                  onPressed: () {
                    Navigator.pushReplacementNamed(context, "/home");
                  },
                ),
              ],
            ),
            title: Text('Username'),
            actions: <Widget>[
              IconButton(
                iconSize: 30,
                icon: Icon(Icons.settings),
                alignment: Alignment.centerRight,
                padding: EdgeInsets.only(right: 20),
                onPressed: () {
                  final profileRoute = "/profile";
                  bool isNewRouteSameAsCurrent = false;
                  Navigator.popUntil(context, (route) {
                    if (route.settings.name == profileRoute) {
                      isNewRouteSameAsCurrent = true;
                    }
                    return true;
                  });

                  if (!isNewRouteSameAsCurrent) {
                    Navigator.pushReplacementNamed(context, profileRoute);
                  }
                },
              )
            ],
          ),
          Positioned(
            left: 0.0,
            right: 0.0,
            child: CircleAvatar(
              backgroundImage: AssetImage("assets/images/person.jpeg"),
              radius: 30,
              key: Key("1"),
            ),
          ),
        ],
      ),

如何将小部件定位在自定义应用栏 Flutter 的中间

How to position a widget in middle of custom appbar Flutter

appbar

widget

dart

flutter