如何在 Flutter 中不給出固定高度的情況下在 ListView 中顯示卡片？

Question

我正在嘗試使用 ListView.builder 創建一個水平的卡片列表，但它給了我一個關於“無限高度”的錯誤。 但是當我用 SingleChildScrollView + Row 替換 ListView.builder 時，它就可以工作了。 我該怎么做才能使 ListView 小部件在此場景中工作？

感謝您的回答。

這是構建 function：

@override
  Widget build(BuildContext context) {

    Size screenSize = MediaQuery.of(context).size;

    return Container(
      color: Colors.black,
      child: Column(
        children: [
          addVerticalSpace(12),
          HomePageHeader(),
          Expanded(
            child: ListView(
              shrinkWrap: true,
              children: [
                addVerticalSpace(24),
                ListViaRow(screenSize),
                const Text("Testing", style: TextStyle(color: Colors.white),)
              ],
            ),
          )
        ],
      ),
    );
  }

這是使用 ScrollView + Row 的卡片列表：

Widget ListViaRow(Size screenSize){

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Padding(
          padding: EdgeInsets.only(left: 24.0),
          child: Text(
            "Card List With Row",
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontFamily: 'Montserrat',
              fontSize: 16
            ),
          ),
        ),
        addVerticalSpace(12),
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          physics: const BouncingScrollPhysics(),
          child: Row(
            children: List<TestCard>.generate(3, (index) => const TestCard()),
          ),
        )
      ],
    );
  }

這是列表視圖：

Widget ListViaListView(Size screenSize){

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          "Card List With ListView.builder",
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontFamily: 'Montserrat',
            fontSize: 16
          ),
        ),
        addVerticalSpace(12),
        ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 2,
          itemBuilder: (context, index) {
            return const TestCard();
          },
        )
      ],
    );
  }

所需 output： https://i.stack.imgur.com/n5cdp.png

Answer 1

嘗試下面的代碼，我的設計與您預期的相同 output

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    ListTile(
      title: Text('Welcome Back'),
      subtitle: Text('Josef Kerr'),
      trailing: Icon(
        Icons.account_circle,
      ),
    ),
    const SizedBox(
      height: 10,
    ),
    SizedBox(
      height: 200,
      child: ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: 5,
        itemBuilder: (context, index) => Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.black,
          ),
          height: 100,
          width: 150,
          margin: EdgeInsets.all(5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10),
                  ),
                  color: Colors.green,
                ),
                height: 80,
              ),
              const SizedBox(
                height: 5,
              ),
              Padding(
                padding: EdgeInsets.only(left: 5),
                child: Text(
                  'Card Header',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 5),
                child: Text(
                  'Add Line 1',
                  style: TextStyle(
                    color: Colors.grey,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 5),
                child: Text(
                  'Add Line 2',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 5),
                child: Text(
                  'State',
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              TextButton(
                style: TextButton.styleFrom(foregroundColor: Colors.green),
                onPressed: () {},
                child: Text('View Event'),
              )
            ],
          ),
        ),
      ),
    ),
    Text('Testing')
  ],
),

結果->