Flutter 圆角头像 AppBar

Question

Flutter 圆角头像 AppBar

8

我目前是Flutter和Dart语言的新手，我正在尝试将个人资料图片设置为我的appBar领先属性。

到目前为止，我已经让我的图片变成了圆形，但我无法使它变小或在左侧放置一个边距。

以下是我的代码片段:

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: new AppBar(
          title: new Text("Activities"),
          leading: new Container(
            padding: new EdgeInsets.all(15.0),
            width: 10.0,
            height: 10.0,
            decoration: new BoxDecoration(
              color: const Color(0xff7c94b6),
              borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
              border: new Border.all(
                color: Colors.white,
                width: 1.0,
              ),
            ),
          ),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.refresh),
              onPressed: () {
                print("Reloading...");
                setState(() {
                  _isLoading = true;
                });
                _FetchData();
              },
            )
          ],
        ),

// ...

这是它的样子：点击这里

你可以看到，我的图片太大了，而且左边没有留白...

我应该如何使图片变小，并且最重要的是，如何使左侧的边距与刷新按钮的右侧边距相似？

任何帮助都将不胜感激，祝好。

- Chomaunte

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rémi Rousselet · Accepted Answer

考虑使用Material与shape: new CircleBorder()的组合来代替手动创建圆形。或者如果适用的话，可以使用CircleAvatar。

然后添加Padding来控制大小和边距。

return new Scaffold(
  backgroundColor: Colors.blueGrey,
  appBar: new AppBar(
    title: new Text("Activities"),
    leading: new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Material(
        shape: new CircleBorder(),
      ),
    ),
  ),
);