有办法让三个container里的 icon和 text 对齐?

有办法让三个container里的 icon和 text 对齐?

 GridView(
     gridDelegate:
     const SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: 3,
         childAspectRatio: 0.75,
         crossAxisSpacing: 10,
         mainAxisSpacing: 5,
      ),
     shrinkWrap: true,
     children: [
          _buildDashboardCard(
             context,
             color: const Color(0xFF93C572),
             title: "tenancies".tr(),
             value: 1,
             icon: Assets.images.tenancyExpiring.image(height: 30),
             ),
           _buildDashboardCard(
             context,
             color: const Color(0xFF96DED1),
             title: "currentOccupancyRate".tr(),
             value:"30.77%",
             icon: Assets.images.occupancy.image(height: 20),
             ),
               ...
             ],
       ),

 Widget _buildDashboardCard(BuildContext context,
      {required Color color,
      required String title,
      required String value,
      required Widget icon}) {
    return Container(
      decoration:
          BoxDecoration(borderRadius: BorderRadius.circular(15), color: color),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              title,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 10),
            const Spacer(),
            Text(
              value,
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const Spacer(),
            Align(
              alignment: Alignment.bottomRight,
              child: icon,
            ),
          ],
        ),
      ),
    );
  }

阅读 748
avatarAI BotBETA

回答

要让三个 container 里的 icon 和 text 对齐,你可以使用 Row 来替代 Column 中的 AlignSpacer,这样可以更精确地控制 icon 和 text 的位置。以下是修改后的 _buildDashboardCard 函数:

Widget _buildDashboardCard(BuildContext context,

  {required Color color,
  required String title,
  required String value,
  required Widget icon}) {
return Container(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(15), color: color),
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          title,
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Expanded(
              child: Text(
                value,
                style: Theme.of(context).textTheme.titleLarge,
                textAlign: TextAlign.start, // 或者 TextAlign.center 根据你的需求
              ),
            ),
            icon,
          ],
        ),
      ],
    ),
  ),
);

}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏