我应该如何使用空间,以便它适用于我的行代码。我在

问题描述 投票:0回答:1
import 'package:flutter/material.dart';

class TrackerWidget extends StatelessWidget {
  const TrackerWidget({
    super.key,
    required this.bgIcon,
    required this.title,
    required this.time,
    required this.size,
    this.isNotificationEnabled = false,
    this.isDone = false,
    required this.timeEnum,
  });

  final String bgIcon;
  final String title;
  final String time;
  final double size;
  final bool isNotificationEnabled;
  final bool isDone;
  final String timeEnum;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(bgIcon),
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.circular(4),
      ),
      padding: EdgeInsets.all(7),
      child: Stack(
        fit: StackFit.expand,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: 17,
                width: double.infinity,
                color: Colors.red.withOpacity(0.2),
                padding: EdgeInsets.zero,
                constraints: BoxConstraints(),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    NotificationWidget(
                      isNotificationEnabled: isNotificationEnabled,
                      time: timeEnum,
                    ),
                    const Spacer(),
                    NotificationWidget(
                      isNotificationEnabled: isNotificationEnabled,
                      time: timeEnum,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class NotificationWidget extends StatelessWidget {
  const NotificationWidget({
    super.key,
    required this.isNotificationEnabled,
    required this.time,
  });

  final bool isNotificationEnabled;
  final String time;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () {},
      padding: EdgeInsets.all(1),
      // constraints: const BoxConstraints(),
      icon: Container(
        width: 16,
        height: 16,
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.green,
          ),
          borderRadius: BorderRadius.circular(120),
        ),
      ),
    );
  }
}

我写了上面的代码来实现下图 我所取得的成就 正如您所看到的,我在通知小部件之间添加了间隔,但它们不会到达小部件的边缘。我添加的红色容器只是为了查看限制在哪里。怎么了?请帮忙

我预计两个圆圈将位于小部件的边缘。 我一直在使用最新版本的flutter。以为可能有问题,已经降级到3.22版本了

flutter dart user-interface
1个回答
0
投票

-改变 mainAxisAlignment:MainAxisAlignment.spaceBetween:添加以在两端对齐NotificationWidget。 - 检查图像 enter image description here 删除了 Spacer():删除了 Spacer() 小部件,并将其功能替换为 MainAxisAlignment.spaceBetween。

© www.soinside.com 2019 - 2024. All rights reserved.