Flutter -如何将按钮对齐到右角

gmol1639 于 2023-05-19 发布在 Flutter

关注(0)|答案(3)|浏览(186)

OutlinedButton(
      onPressed: () async {},
      child: MaterialButton(
        onPressed: () async {
          updateFavoriteStatus(
            context: context,
            isFavorite: isFavorite,
            product: product,
          );
        },
        height: getProportionateScreenHeight(0.0566),
        color: AppColors.kPrimaryColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25),
        ),
        child: Consumer<Product>(builder: (context, prod, ch) {
          final isFavorite =
          Provider.of<Favorites>(context, listen: false)
              .isFavoriteOrNot(prod.id);
          final productLikes = prod.likes!;
          return Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              InkWell(
                onTap: tryUpdateFavoriteStatus,
                child: Icon(
                  CupertinoIcons.heart_fill,
                  color: isFavorite
                      ? AppColors.philippineSilver
                      : AppColors.white,
                ),
              ),
              SizedBox(
                width: getProportionateScreenWidth(0.15),
              ),
              Text(
                '$productLikes ',
                style:
                Theme.of(context).textTheme.bodyMedium!.copyWith(
                  color: AppColors.white,
                ),
              ),
            ],
          );
        }),
      ),

我有一个问题添加按钮的右侧行。我尝试使用MainAxisAlignment.和alignment：对齐，没错，但没成功.

flutter

来源：https://stackoverflow.com/questions/76223404/flutter-how-to-align-button-to-right-corner

3条答案

按热度按时间

b5buobof1#

OutlinedButton(
      onPressed: () async {},
      child: MaterialButton(
        onPressed: () async {},
        height: 40.0,
        color: Colors.amber,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            InkWell(
              onTap: () {},
              child: const Icon(
                Icons.heart_broken_rounded,
                color: Colors.white,
              ),
            ),
            const SizedBox(
              width: 10,
            ),
            const Text(
              "5",
              style: TextStyle(color: Colors.white),
            )
          ],
        ),
      ),
    ),

希望这对你有帮助。

赞(0）回复(0）举报 2023-05-19

ffx8fchx2#

Align(
alignment: Alignment(0.9, 0.0),
child: MaterialButton(
    onPressed: () async {},
    height: 40.0,
    color: Colors.amber,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        InkWell(
          onTap: () {},
          child: const Icon(
            Icons.heart_broken_rounded,
            color: Colors.white,
          ),
        ),
        const SizedBox(
          width: 10,
        ),
        const Text(
          "5",
          style: TextStyle(color: Colors.white),
         )
        ],
      ),
    ),
  ),

希望这对你有帮助。将其 Package 对齐。

赞(0）回复(0）举报 2023-05-19

sulc1iza3#

您可以通过使用行和间隔小部件来实现这一点。

Row(children:[
           Spacer(),OutlinedButton(
      onPressed: () async {},
      child: MaterialButton(
        onPressed: () async {},
        height: 40.0,
        color: Colors.amber,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            InkWell(
              onTap: () {},
              child: const Icon(
                Icons.heart_broken_rounded,
                color: Colors.white,
              ),
            ),
            const SizedBox(
              width: 10,
            ),
            const Text(
              "5",
              style: TextStyle(color: Colors.white),
            )
          ],
        ),
      ),
    )],)

赞(0）回复(0）举报 2023-05-19

我来回答

Flutter -如何将按钮对齐到右角

3条答案

相关问题

热门标签

最新问答