ListView構建器在應該僅水平擴展時垂直擴展[顫動]

這是我的應用程式的一部分，其中串列視圖也在垂直擴展。最初我將串列視圖的方向設定為水平軸，但它也在垂直方向擴展。我試圖將列的大小設定為 min 但沒有運氣。

如您所見，串列視圖之前和之后有很多差距。我真的不明白為什么它在那里。我要做的是前后沒有空隙。我怎樣才能做到這一點？

這是代碼

import 'package:flutter/material.dart';

// widgets
import '../widgets/widgets.dart';

class ShopPage extends StatelessWidget {
  const ShopPage({Key? key}) : super(key: key);

  // route name
  static const String routeName = '/shop';

  // colors list
  final List<Color> colors = const [
    Color(0xFFEF9A9A),
    Color(0xFFF48FB1),
    Color(0xFFCE93D8),
    Color(0xFFB39DDB),
    Color(0xFF9FA8DA),
    Color(0xFF90CAF9),
    Color(0xFF81D4FA),
    Color(0xFF80DEEA),
    Color(0xFF80CBC4),
    Color(0xFFC5E1A5),
    Color(0xFFE6EE9C),
    Color(0xFFFFF59D),
    Color(0xFFFFE082),
    Color(0xFFFFCC80),
    Color(0xFFFFAB91),
    Color(0xFFF5F5F5),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const Icon(
          Icons.arrow_back_ios,
          size: 20,
        ),
        centerTitle: true,
        title: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.change_history,
              color: Theme.of(context).colorScheme.secondary,
              size: 20,
            ),
            const SizedBox(
              width: 10,
            ),
            const Text(
              '20 rects',
              style: TextStyle(
                fontSize: 12,
                fontFamily: 'Inter',
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 38.0),
            child: Text(
              'Companion colors',
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.bold,
                fontFamily: 'Inter',
                color: Colors.white,
              ),
            ),
          ),
          const SizedBox(
            height: 15,
          ),
          Expanded(
            child: ListView.builder(
              physics: const BouncingScrollPhysics(),
              padding: const EdgeInsets.only(left: 38, right: 23),
              itemBuilder: (context, index) {
                return Row(
                  children: [
                    Container(
                      height: 32,
                      width: 32,
                      decoration: BoxDecoration(
                        color: colors[index],
                        borderRadius: BorderRadius.circular(32),
                      ),
                    ),
                    const SizedBox(
                      width: 15,
                    ),
                  ],
                );
              },
              itemCount: colors.length,
              scrollDirection: Axis.horizontal,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          const Padding(
            padding: EdgeInsets.all(38.0),
            child: Button(
              text: 'SELECTED',
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

uj5u.com熱心網友回復：

您可以包裝SizedBox并提供專案高度。

SizedBox(
  height: 32,
  child: ListView.builder(
    physics: const BouncingScrollPhysics(),
    padding: const EdgeInsets.only(left: 38, right: 23),
    itemBuilder: (context, index) {
      return Row(

和SingleChildScrollView

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(
      children: colors
          .map(
            (e) => Padding(
              padding: const EdgeInsets.only(right: 8),
              child: Container(
                height: 32,
                width: 32,
                decoration: BoxDecoration(
                  color: e,
                  borderRadius: BorderRadius.circular(32),
                ),
              ),
            ),
          )
          .toList(),
    ),
  ),
),

uj5u.com熱心網友回復：

首先讓我告訴你不是專家，但你可以將串列視圖包裝在大小框中，而不是給你的列 mainAxisSize：MainAxisSize.min，

Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 38.0),
              child: Text(
                'Companion colors',
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'Inter',
                  color: Colors.white,
                ),
              ),
            ),
            const SizedBox(
              height: 15,
            ),
            SizedBox(
              height: 100,
              child: ListView.builder(
                physics: const BouncingScrollPhysics(),
                padding: const EdgeInsets.only(left: 38, right: 23),
                itemBuilder: (context, index) {
                  return Row(
                    children: [
                      Container(
                        height: 32,
                        width: 32,
                        decoration: BoxDecoration(
                          color: colors[index],
                          borderRadius: BorderRadius.circular(32),
                        ),
                      ),
                      const SizedBox(
                        width: 15,
                      ),
                    ],
                  );
                },
                itemCount: colors.length,
                scrollDirection: Axis.horizontal,
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            const Padding(
              padding: EdgeInsets.all(38.0),
              child: Button(
                text: 'SELECTED',
                color: Colors.white,
              ),),
            )

標籤：扑 镖 列表显示 颤振布局

上一篇：Flutter：具有隨機顏色的長串列中的性能問題

下一篇：如何在flutter中使用listview和riverpod