flutter - 如何将图标设置为topRight

Question

我的小部件在行内，我想设置图标小部件位置topRight但总是失败，因为我的图标总是在中心位置

我已经在使用

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,
          ),
        )
      ],
    ),
  );
}

我想像这样输出

标签： flutterdart

Answer 1

试试这个

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,
          ),
        ),
      ],
    ),
  )