dart 包含卡片的GridView在Flutter中的末尾被修剪

inn6fuwd 于 2023-02-27 发布在 Flutter

关注(0)|答案(3)|浏览(119)

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

创建列表正文.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(),
      ),
    );
  }

列表屏幕.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()
              ],
            )
          ),
        ),
    );
  }

屏幕截图x1c 0d1x

我是一个完全新的扑，所以，对不起，如果有一些愚蠢的错误。但任何帮助将是有用的。谢谢你的时间！

dart

来源：https://stackoverflow.com/questions/66985822/gridview-containing-cards-are-getting-trimmed-at-the-end-in-flutter

3条答案

按热度按时间

mwngjboj1#

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

溶液2

使用Slivers，它们是动态的。
为此，你需要定制你的结构，你用一个CustomScrollView()来 Package 所有的东西，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>[
                        ...

您可以使用SizedBoxheight定义高度。您还可以在CustomScrollView上为整个视图应用漂亮的效果
切片列表示例：

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

赞(0）回复(0）举报 2023-02-27

klsxnrf12#

GridView小部件本身就是Scrollable，因此您不必使用Column和SingleChildScrollView小部件 Package 它...现在，如果圆圈从屏幕上消失，您只需向下滚动即可
如果你想让所有的圆都适合屏幕..你必须使用
var mobileHeight = MediaQuery.of(context).size.height
然后每个圆的高度将是mobileHeight除以垂直方向上的圆数。