如何将小部件与 Wrap 对齐

Question

我想将图像与文本对齐。 我修改了代码以实现它，但它没有显示任何变化。

图片和文字应该是这样的。

反而像上图，我的是这样的。

这是我的代码，我正在使用 Wrap 顺便说一句：

Column(
        children: [
          SizedBox(
            width: 350,
            child: Wrap(
              alignment: WrapAlignment.start,
              direction: Axis.horizontal,
              crossAxisAlignment: WrapCrossAlignment.center,
              children: [
                SvgPicture.asset(
                  Assets.icons.image9.path,
                  fit: BoxFit.cover,
                ),
                Wrap(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(left: 15),
                      child: Text(
                        'Gekyume Onfroy',
                        style: heading3(
                          color: ColorName.neutralBackgroundWhite,
                        ),
                      ),
                    ),
                  ],
                ),
...
                    onSelected: (_) {},
                    child: SvgPicture.asset(Assets.icons.moreVertical.path),
                  ),
                ),
                SizedBox(width: 17),
                Text(
                  'Access Code : 6666',
                  style: body1(color: ColorName.neutralBackgroundWhite),
                ),
              ],
            ),

Answer 1

不要使用换行，因为如果移动设备没有足够的空间，它会将 go 水平转换为垂直。 您必须改用 Rows 和 Column ，检查底部代码以进行实现和截图：

Container(
          padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 16.0),
          decoration: BoxDecoration(
            color: Colors.blue[900],
            borderRadius: BorderRadius.circular(12)
          ),
          // width: 350,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                height: 60,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(12),
                        image: const DecorationImage(image: NetworkImage('https://cartoonavatar.com/wp-content/uploads/2021/12/02-300x300.png')),
                      ),
                      width: 60,
                    ),
                    const SizedBox(width: 10),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: const [
                          Text('Gekyume Onfroy', maxLines:1, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 20, color: Colors.white)),
                          Spacer(),
                          Text('Access Code : 6666', style: TextStyle(fontSize: 14, color: Colors.white),)
                        ],
                      ),
                    ),
                    const SizedBox(width: 10),
                    IconButton(padding: EdgeInsets.zero, onPressed: () {}, icon: const Icon(Icons.more_vert, color: Colors.white))
                  ],
                ),
              ),
              const SizedBox(height: 10),
              const Divider(color: Colors.white, thickness: 2,),
              const SizedBox(height: 10),
              Row(
                children: [
                  const Icon(Icons.call, color: Colors.white),
                  const SizedBox(width: 10),
                  const Text('628-123-456-666', style: TextStyle(color: Colors.white)),
                  const Spacer(),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    decoration: BoxDecoration(
                        color: Colors.blue[300],
                        borderRadius: BorderRadius.circular(4)
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Text('Last Activity', style: TextStyle(color: Colors.white),),
                        Icon(Icons.navigate_next, color: Colors.white, size: 14,)
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),