如何在单行中添加两个带有图标和文本的图像 [关闭]

Question

我想创建与图像中描述的相同的布局。但我无法在同一行中添加两个图像，其图标和文本与图像中描述的相同。有人请帮助我。

Answer 1

您可以使用Container、Row、Column、Stack来创建这个UI。这是例子。

class MyCard extends StatelessWidget {
  const MyCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        children: [
          Expanded(
            flex:2,
            child: Stack(
              children: [
                // use image
                const Placeholder(), //use your image

                Positioned(
                  top: 8,
                  left: 8,
                  child: IconButton(onPressed: null, icon: Icon(Icons.favorite)),
                ),
                Align(
                  //you can use the Positioned widget here
                  alignment: Alignment.bottomLeft,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text('Flat..'),
                      Text('Off'),
                    ],
                  ),
                ),
              ],
            ),
          ),
          SizedBox(width: 8),
          Expanded(
            flex: 3,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Flat............'),
                Spacer(),
                Row(
                  children: [Icon(Icons.ac_unit_outlined), Text('3 Km')],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}