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

Question

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

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()
              ],
            )
          ),
        ),
    );
  }

截图

我是 flutter 的新手，如果有什么愚蠢的错误，请见谅。但是任何帮助都是有用的。感谢您的宝贵时间！

Answer 1

只是为了探索，你可以做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

Answer 2

GridView Widget 本身是 Scrollable ，所以你不必用 Column 和 SingleChildScrollView Widget 包裹它...... 如果圆圈超出屏幕范围，您现在可以简单地向下滚动

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

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

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

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

GridView containing Cards are getting Trimmed at the end in Flutter

android

flutter

dart

flutter-layout

flutter-gridview

解决方案 1

解决方案 2