包含卡片的 GridView 在 Flutter 中最后被修剪

编程问答 2022-05-14

问题描述

我正在尝试使用卡片作为列表元素创建一个网格视图页面，最后一张卡片从底部被剪掉。以下是相关代码片段：

createListBody.dart

List<String> services = [
    
    'Demo1','Demo2','Demo3','Demo4','Demo5','Demo6','Demo7','Demo8','Demo9','Demo10',];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,child: GridView.count(
        crossAxisCount: 2,crossAxisspacing: 2.0,mainAxisspacing: 2.0,children: services.map((String serviceName){
          return Container(
            child:Card(
              color: Colors.grey[500],elevation: 15,semanticContainer: true,shadowColor: palletFuchsia,shape: CircleBorder(),child: InkWell(
                onTap: (){
                  print("Tapped "+serviceName);
                },child: Center(
                  child: Text(
                    serviceName,style: TextStyle(
                      fontWeight: FontWeight.bold,fontSize: 25
                    ),),)
          );
        }).toList(),);
  }

listScreen.dart

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: palletWhiteDrawer,drawer: Theme(
        data: Theme.of(context).copyWith(
          canvasColor: palletYellowDrawer,child: CreatDrawerWidget(),appBar: CreateAppBar(),body:GestureDetector(
        behavior: HitTestBehavior.opaque,onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },child: SingleChildScrollView(
            
            child: Column(
              mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.center,children: [
                ServiceListBody()
              ],)
          ),);
  }

截图

As visible in the screenshot,the last card elements are getting cut,i.e. not getting rendered completely

我对颤振完全陌生，如果有一些愚蠢的错误，抱歉。但是任何帮助都是有用的。 感谢您的时间！

解决方法

只是为了探索，你可以做height: MediaQuery.of(context).size.height *2,它不应该再被剪掉了吧？

解决方案 1

无论您在 ListView 中放入多少物品，您都将给定的高度告知您的容器，该高度目前是固定的。

例如，您可以将 ConstrainedBox 与 shrinkWrap:true 一起使用并管理您的最大高度

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 200,minHeight: 56.0),child: ListView.builder(
    shrinkWrap: true,...

更多信息：https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html

解决方案 2

使用 Slivers，它们是动态的。

为此，您需要稍微自定义一下您的结构。你用 CustomScrollView() 包裹所有东西，SliverToBoxAdapter() 代表固定元素，SliverList() 代表动态元素，让它像魅力一样工作。

使用 CustomScrollView 和 SliverToBoxAdapter 的示例：

return SafeArea(
      child: CustomScrollView(
        //scrollDirection: Axis.vertical,physics: BouncingScrollPhysics(),slivers: <Widget>[
          // Place sliver widgets here
          SliverToBoxAdapter(
              child: Padding(
                  padding: const EdgeInsets.fromLTRB(25,30,25,20),child: SizedBox(
                    height: 299,child: Column(children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
                        ...

您可以使用 SizedBox height 定义高度。您还可以在 CustomScrollView

上对整个视图应用漂亮的效果

示例 Sliverlist：

   SliverList(
      delegate: SliverChildBuilderDelegate(
    (ctx,index) => ChangeNotifierProvider.value(
      value: list[index],child: GestureDetector(
        onTap: () {}),childCount: list.length,)),

关于条子的信息：https://medium.com/flutterdevs/explore-slivers-in-flutter-d44073bffdf6

,

GridView Widget 本身是 Scrollable ，因此您不必用 Column 和 SingleChildScrollView Widget 包装它... 如果圆圈离开屏幕，您现在可以简单地向下滚动

如果您希望所有圆圈都适合屏幕.. 您必须使用

var mobileHeight = MediaQuery.of(context).size.height

然后每个圆圈的高度将是 mobileHeight 除以编号。垂直的圆圈。

androidandroiddartflutter-gridviewflutter-layout