flutter 如何将小部件与换行对齐

g52tjvyc 于 2023-01-27 发布在 Flutter

关注(0)|答案(1)|浏览(129)

我想对齐图片和文字。我已经修改了代码，使之发生，但它没有显示任何变化。
图像和文字应该是这样的。

而不是像上面的图片，我的是这样的。

这是我的代码，我使用 Package btw：

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

flutter

来源：https://stackoverflow.com/questions/75217497/how-to-align-widget-with-wrap

1条答案

按热度按时间

6tqwzwtp1#

如果移动终端没有足够的空间，不要使用wrap，因为它会从水平方向变成垂直方向。你必须使用行和列来代替，检查底层代码的实现和截图：

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

赞(0）回复(0）举报 2023-01-27

我来回答

flutter 如何将小部件与换行对齐

1条答案

相关问题

热门标签

最新问答