android - 包含卡片的 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()
              ],
            )
          ),
        ),
    );
  }

截屏

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

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使用and 的示例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,
  )),

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

Answer 2

小GridView部件本身是Scrollable，所以你不必用一个Column和SingleChildScrollView小部件来包装它......你现在可以简单地向下滚动如果圆圈离开屏幕

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

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

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