Question

我正在尝试在居中的圆形头像旁边的右上角放置一个编辑图标。但是，如果我在行窗口小部件中使用中心窗口小部件，它将无法正常工作：

Row(
              children: <Widget>[
                Center(
                  child:
                CircleAvatar(
                  radius: 70,
                  backgroundImage: NetworkImage(
                      ""),
                ),
                ),
                Icon(Icons.edit),
              ],
            )

如果我将“行内容”与mainaxisalignment居中，则它不会将化身居中，而是将化身与图标一起居中：

Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 70,
                  backgroundImage: NetworkImage(
                      "https://autix.ch/wp-content/uploads/profile-placeholder.png"),
                ),
                Icon(Icons.edit),
              ],
            ),

It should look like this:

Answer 1

尝试使用堆栈：

Container(
  width: 200,
  height: 200,
  child: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.topRight,
        child: Icon(Icons.access_time),
      ),
      Container(
        width: 200,
        height: 200,
        child: CircleAvatar(
          child: Text('Avatar'),
        ),
      ),
    ],
  ),
),

结果：

Answer 2

您可以使用容器小部件包装编辑图标，然后将其与topRight对齐，如下所示：

TRANSFORM Sum([MG ETC].Award) AS SumOfAward
SELECT 
M.[PO Concatenate], 
Sum(M.Award) AS TotalAward,
(SELECT TOP 1 M1.[Material Group] FROM [MG ETC] AS M1 WHERE M1.[PO #]=M.[PO Concatenate] ORDER BY M1.Award DESC) AS TopGroup
FROM [MG ETC] AS M
GROUP BY M.[PO Concatenate]
PIVOT [MG ETC].[FY/P];

Answer 3

你可以在没有容器的情况下做到：

CircleAvatar(
  backgroundImage: NetworkImage(photoURL),
  child: Stack(
    children: [
      Align(
        alignment: Alignment.topRight,
        child: Icon(Icons.ac_unit),
      )
    ],
  ),
),

Flutter：位于居中CircleAvatar旁边的位置图标

3 个答案: