如何 position 自定义应用栏中间的小部件 Flutter

Question

编辑：我想要在我创建的圆圈中的 go 图标，但我现在似乎使用 Stack and 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;

原帖：所以我一直在尝试在 flutter 中制作一个自定义应用栏，但我想在页面中间显示的图像不是 go，我需要它到 Z34D1F91FB2E514B8576FAB1A75A89A66

这是我到目前为止所拥有的，我想要的是显示在应用栏中心的图像（宽度/ 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 以使其居中图像在中间。

如果您想以其他方式放置它，则必须使用堆栈和定位的小部件来相应地调整其 position

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"),
            ),
          ),
        ],
      ),