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

Question

我正在尝试使用卡片作为列表元素创建一个网格视图页面，并且最后一张卡片正在从底部切开。以下是相关代码sn-ps：

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

截图

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

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 小部件本身是 Scrollable ，因此您不必用 Column 和 SingleChildScrollView 小部件包装它... 如果圆圈离开屏幕，您现在可以简单地向下滚动

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

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

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