我需要创建一个卡片结构，但我不知道该怎么做

Question

我想要制作的卡片结构

我尝试按照我在代码中指定的方式执行某些操作，但这并不完全是我想要的。 例如，即使我指定水平，我也会遇到溢出错误等。 这里使用 listTile 是错误的决定吗

SizedBox(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: campSites.length,
        itemBuilder: (context, index) {
          Map<String, dynamic> campSite = campSites[index];
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                SizedBox(
                  height: 99,
                  width: 94,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(15),
                    child: CachedNetworkImage(
                      imageUrl: campSite['image'],
                      imageBuilder: (context, imageProvider) => Container(
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: imageProvider,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      placeholder: (context, url) =>
                          const CircularProgressIndicator(),
                      errorWidget: (context, url, error) =>
                          const Icon(Icons.error),
                    ),
                  ),
                ),
                ListTile(
                  title: Text(campSite['name'],
                      style: const TextStyle(fontWeight: FontWeight.bold)),
                  subtitle: Text('${campSite['location']} away'),
                ),
              ],
            ),
          );
        },
      ),
    );

Answer 1

请尝试

PageView

+

Row

请参阅示例了解更多信息

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final items = [1, 2, 3, 4, 5, 6, 7];
    final chunkItems = items.slices(2).toList();
    const spacePerItem = 16.0;
    final itemWidth =
        (MediaQuery.of(context).size.width - spacePerItem * 3) / 2;
    return PageView.builder(
      itemCount: chunkItems.length,
      itemBuilder: (ctx, index) => Row(children: [
        const SizedBox(width: spacePerItem / 2),
        ...chunkItems[index].map(
          (e) => Container(
            width: itemWidth,
            margin: const EdgeInsets.symmetric(horizontal: spacePerItem / 2),
            color: Colors.red,
            child: Text('$e'),
          ),
        ),
        const SizedBox(width: spacePerItem / 2),
      ]),
    );
  }
}

Answer 2

您似乎正在尝试使用 Flutter 创建一个用于显示露营地信息的卡片结构。您提供的代码是正确的，但如果您遇到溢出错误，您可能需要调整小部件的大小和布局。

ListView.builder(
  scrollDirection: Axis.vertical,
  physics: const NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  itemCount: campSites.length,
  itemBuilder: (context, index) {
    Map<String, dynamic> campSite = campSites[index];
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 120, // Adjust the height as needed
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.grey[200], // Add background color if 
needed
        ),
        child: Row(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15),
            bottomLeft: Radius.circular(15),
          ),
          child: CachedNetworkImage(
            imageUrl: campSite['image'],
            width: 100, // Adjust the width of the image
            fit: BoxFit.cover,
            placeholder: (context, url) => const 
CircularProgressIndicator(),
            errorWidget: (context, url, error) => const Icon(Icons.error),
          ),
        ),
        Expanded(
          child: ListTile(
              title: Text(
                campSite['name'],
                  style: const TextStyle(fontWeight: FontWeight.bold),
               ),
                subtitle: Text('${campSite['location']} away'),
              ),
            ),
          ],
        ),
      ),
    );
  },
),