Question

我正在尝试使用CircleAvatar小部件在Flutter中创建带有边框的圆形头像：

CircleAvatar(
    radius: 30,
    backgroundImage: NetworkImage(url),
  ),

如何在此代码的结果中添加边框？

Answer 1

将<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <link rel="icon" href="../public/"> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="../public/index/css/index.css" /> </head> <body> <a href="/room">click here</a> <script> var socket = io(); // this line is supposed to be sufficient to trigger // the socket connection </script> <script src="../routes/index.js"></script> <script src="/socket.io/socket.io.js"></script> </body> </html>小部件包装在另一个CircleAvatar小部件中，然后设置不同的radius和backgroundColor以实现所需的边框。

这是代码段

CircleAvatar

Code Snippet Link

Answer 2

只使用颜色

CircleAvatar(
        backgroundColor: Colors.red,
        radius: 70.0,
        child: CircleAvatar(
          backgroundColor: Colors.orange,
          radius: 60,
        ),
      ),

从本地存储使用时

CircleAvatar(
        backgroundColor: Colors.white,
        radius: 70,
        child: CircleAvatar(
          backgroundImage: AssetImage("image/bg.jpg"),
          radius: 60,
        ),
      ),

如果使用网络图片

      CircleAvatar(
        backgroundColor: Colors.white,
        radius: 70,
        child: CircleAvatar(
          backgroundImage: NetworkImage(url),
          radius: 60,
        ),
      ),

Answer 3

检查this链接。如果没有，您将获得代码片段。

代码是；

CircleAvatar(
              radius: 55,
              backgroundColor: Colors.teal,
              child: CircleAvatar(
                radius: 50,
                backgroundImage: NetworkImage('url'),
              ),
            )

颤抖的圆头像与边框

3 个答案: