如何将小部件放置在自定义应用栏 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;

原帖： 所以我一直在尝试制作一个自定义的应用栏，但是我想在页面中间显示的图像没有去我需要它去的地方。

这是我目前所拥有的，我想要的是显示在应用栏中心的图像（宽度/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

你可以用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"),
            ),
          ),
        ],
      ),

Answer 2

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

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

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