flutter - 如何将图标设置为topRight

标签 flutter dart

我的小部件位于行内,我想在topRight上设置图标小部件位置,但始终失败,因为我的图标始终位于中心位置

enter image description here

我已经用过

Align(
  alignment: Alignment.topRight,
  child: Icon(
    LineAwesomeIcons.heart,
    color: lightColor,
    size: 36,
  ),
)

强制占有,但总是失败。如何实现这种情况?图标始终处于中心位置

我的布局
Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.symmetric(
      vertical: 14.0,
      horizontal: 18.0,
    ),
    margin: EdgeInsets.only(
      bottom: 20.0,
    ),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.0),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.2),
          spreadRadius: 1.0,
          blurRadius: 6.0,
        ),
      ],
    ),
    child: Row(
      children: <Widget>[
        CircleAvatar(
          backgroundColor: Color(0xFFD9D9D9),
          backgroundImage: NetworkImage(USER_IMAGE),
          radius: 36.0,
        ),
        SizedBox(width: 10.0),
        Flexible(
          child: RichText(
            text: TextSpan(
              text: widget.status + "\n",
              style: TextStyle(
                color: Colors.purple,
                fontSize: 12,
                fontWeight: FontWeight.w400,
                height: 1.3,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: widget.name + "\n",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    height: 1.3,
                  ),
                ),
                TextSpan(
                  text: widget.address,
                  style: TextStyle(
                    color: Colors.black38,
                    fontWeight: FontWeight.w400,
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
        ),
        SizedBox(width: 10.0),
        Icon(
          LineAwesomeIcons.heart,
          color: lightColor,
          size: 36,
        )
        Align(
          alignment: Alignment.topRight,
          child: Icon(
            LineAwesomeIcons.heart,
            color: lightColor,
            size: 36,
          ),
        )
      ],
    ),
  );
}

我想输出像

enter image description here

最佳答案

Try this one


Container(
    padding: EdgeInsets.symmetric(
      vertical: 14.0,
      horizontal: 18.0,
    ),
    margin: EdgeInsets.only(
      bottom: 20.0,
    ),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.0),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.2),
          spreadRadius: 1.0,
          blurRadius: 6.0,
        ),
      ],
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Row(
            children: <Widget>[
              CircleAvatar(
                backgroundColor: Color(0xFFD9D9D9),
                backgroundImage: NetworkImage('https://banner2.cleanpng.com/20180920/yko/kisspng-computer-icons-portable-network-graphics-avatar-ic-5ba3c66df14d32.3051789815374598219884.jpg'),
                radius: 36.0,
              ),
              SizedBox(width: 10.0),
              Flexible(
                child: RichText(
                  text: TextSpan(
                    text: "status\n",
                    style: TextStyle(
                      color: Colors.purple,
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                      height: 1.3,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                        text: "Name \n",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          height: 1.3,
                        ),
                      ),
                      TextSpan(
                        text: 'Poplar pharma limited Dermatologist San Franscisco CA|5',
                        style: TextStyle(
                          color: Colors.black38,
                          fontWeight: FontWeight.w400,
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(width: 10.0),

            ],
          ),
        ),
        Align(
          alignment: Alignment.topCenter,
          child: Icon(
            Icons.help,
            color: Colors.cyan,
            size: 36,
          ),
        ),
      ],
    ),
  )

关于flutter - 如何将图标设置为topRight,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61154959/

相关文章:

flutter - SELinux Denial,同时进行视频通话和转录

flutter - 列占用的空间超过 Flutter 所需的空间

dart - 使用 flutter 的集合中的值(value)总和

android - Flutter 如何处理文本选择?

flutter - Flutter-类型 'BoxDecoration'不是类型 'Widget'的子类型

firebase - 如何在flutter dart中每20秒展示一次插页式广告

除非使用 Center 来包装小部件,否则 Container 小部件的 Flutter 设置宽度和高度不起作用?为什么?

dart - Flutter SVG 渲染

flutter - 如何让我的 flutter 应用程序将用户返回到操作系统主屏幕?

flutter - 如何使导航底部栏透明