滚动时列出容器外的图块

Question

当我滚动列表图块时，我的 UI 中的容器内有一个 ListViewBuilder，如下所示：

这是我的代码：

 return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
      child: Container(

        margin: const EdgeInsets.only(
            left: 30, right: 30, bottom: 20),
        width: getProportionateScreenWidth(600),
        height: getProportionateScreenHeight(300),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(17),
              topRight: Radius.circular(17),
              bottomLeft: Radius.circular(17),
              bottomRight: Radius.circular(17)),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 3), // changes position of shadow
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,

          children: [


    

       Expanded(child: ListView.builder(
           shrinkWrap: true,
           physics: const ScrollPhysics(),
           itemCount: snapshot.data!.perimeters.length,
           itemBuilder: (context,index){
             return PerimListTile(
               perimID: snapshot.data!.perimeters[index].perimeterId.toString(),
               perimLabel: snapshot.data!.perimeters[index].label,



             );
           })),



      ],




        ),
      ),
    )

我希望列表图块即使在滚动时也保留在容器内，如果有人知道如何解决这个问题我将不胜感激，提前谢谢您。

Answer 1

问题

我不知道您使用的 getProportionateScreenHeight 的详细信息，但我假设它返回一个双精度值。
Column 内的 ListView 受到容器高度的限制。

解决方案

删除容器的高度并在 Column 上尝试 mainAxisSize: MainAxisSize.min。

Answer 2

解决

[1]在容器Widget中使用剪辑行为参数。并将其设置为hardEdge

clipBehavior：Clip.hardEdge，

[2] 用 Card 小部件包裹 ListTile 小部件，使卡片位于 Container 内。

卡片（子项：ListTile（））；

演示

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyHome());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Ans(),
    );
  }
}

class Ans extends StatefulWidget {
  const Ans({super.key});

  @override
  State<Ans> createState() => _AnsState();
}

class _AnsState extends State<Ans> {
  List<String> charName = [
    'Rio',
    'Tokyo',
    'Berlin',
    'Stockhome',
    'Lisbon',
    'Sergio',
    'Martin'
  ];
  List<String> charGender = [
    'male',
    'female',
    'male',
    'female',
    'female',
    'male',
    'male'
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Tile Wrapper"),
      ),
      body: SizedBox(
        height: double.infinity,
        width: double.infinity,
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 100.0),
              child: Container(
                height: 400,
                width: 300,

                /// Clipping the inner View Condition
                clipBehavior: Clip.hardEdge,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.2),
                  border: Border.all(color: Colors.black),
                  color: Colors.amberAccent,
                ),
                child: ListView.builder(
                    itemCount: charGender.length,
                    itemBuilder: ((BuildContext context, int index) {
                      return Padding(
                        padding: EdgeInsets.only(top: 20.0),

                        //// Wrap the ListTile with Card Widget...
                        child: Card(
                          child: ListTile(
                            title: Text(
                              charName[index],
                              style: TextStyle(fontSize: 18.0),
                            ),
                            subtitle: Text(
                              charGender[index],
                              style: TextStyle(fontSize: 18.0),
                            ),
                            tileColor: Colors.brown,
                            leading: CircleAvatar(
                                radius: 20, child: Icon(Icons.person_rounded)),
                          ),
                        ),
                      );
                    })),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

示例