在flutter中使用gridview时屏幕顶部出现阴影

问题描述 投票:0回答:1

我有这个代码

Scaffold(
              appBar: AppBar(
                elevation: 0,
                toolbarHeight: 0,
              ),
              body: LayoutBuilder(
                builder: (context, constraints) {
                  return Column(
                    children: [
                      Expanded(
                        child: Column(
                          children: [
                            Padding(
                              padding: EdgeInsets.symmetric(horizontal: 20),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    "Let's Discover",
                                    style: TextStyle(
                                        fontSize: 24,
                                        fontWeight: FontWeight.w800),
                                  ),
                                  IconButton(
                                    onPressed: () {},
                                    icon: Image.asset(
                                      'assets/images/avatar.png',
                                      fit: BoxFit.cover,
                                      height: 45,
                                      width: 45,
                                    ),
                                  )
                                ],
                              ),
                            ),
                            const SizedBox(
                              height: 45,
                            ),
                            Container(
                              width: double.infinity,
                              padding: EdgeInsets.symmetric(
                                  horizontal: 10, vertical: 10),
                              margin: EdgeInsets.symmetric(horizontal: 20),
                              decoration: BoxDecoration(
                                color: Colors.grey[200],
                                borderRadius: BorderRadius.circular(35),
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.max,
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Container(
                                    padding:
                                        EdgeInsets.symmetric(horizontal: 10),
                                    child: Icon(
                                      Icons.search,
                                      size: 26,
                                    ),
                                  ),
                                  Expanded(
                                    child: Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          8, 0, 8, 0),
                                      child: TextFormField(
                                        autofocus: true,
                                        obscureText: false,
                                        decoration: InputDecoration(
                                            border: InputBorder.none,
                                            hintText: 'Search destination'),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            const SizedBox(
                              height: 30,
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(horizontal: 20),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text('Categories'),
                                  InkWell(
                                    onTap: () {},
                                    focusColor: Colors.grey,
                                    child: Text(
                                      'View All',
                                      style:
                                          TextStyle(color: AppColors.mainText),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            const SizedBox(
                              height: 20,
                            ),
                            Container(
                              height: 100,
                              margin: EdgeInsets.symmetric(horizontal: 20),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(35.0)),
                              child: ListView.builder(
                                itemCount: successState.photoDestination.length,
                                scrollDirection: Axis.horizontal,
                                physics: const BouncingScrollPhysics(),
                                itemBuilder: (context, index) {
                                  final item =
                                      successState.photoDestination[index];
                                  return const Categories();
                                },
                              ),
                            ),
                            const SizedBox(
                              height: 40,
                            ),
                            Container(
                              decoration: BoxDecoration(
                                  color: Colors.grey[200],
                                  borderRadius: BorderRadius.circular(30)),
                              padding: EdgeInsets.symmetric(
                                  horizontal: 20, vertical: 10),
                              margin: EdgeInsets.symmetric(horizontal: 20),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: List.generate(
                                  sortable.length,
                                  (index) => AnimatedSwitcher(
                                    duration: Duration(milliseconds: 700),
                                    switchInCurve: Curves.easeIn,
                                    switchOutCurve: Curves.easeOut,
                                    transitionBuilder: (child, animation) {
                                      return FadeTransition(
                                        opacity: animation,
                                        child: child,
                                      );
                                    },
                                    child: InkWell(
                                      onTap: () {
                                        setState(() {
                                          _sortable = sortable[index];
                                        });
                                      },
                                      child: Container(
                                        padding: EdgeInsets.all(10),
                                        decoration: BoxDecoration(
                                            color: sortable[index] == _sortable
                                                ? Colors.white
                                                : Colors.transparent,
                                            borderRadius:
                                                BorderRadius.circular(20),
                                            boxShadow: sortable[index] ==
                                                    _sortable
                                                ? [
                                                    BoxShadow(
                                                      blurRadius: 5.0,
                                                      color: Color.fromARGB(
                                                          199, 228, 226, 226),
                                                      spreadRadius: 5,
                                                    )
                                                  ]
                                                : []),
                                        child: Center(
                                          child: Text(
                                            sortable[index],
                                            style: TextStyle(
                                              color:
                                                  sortable[index] == _sortable
                                                      ? Colors.orange
                                                      : Colors.grey,
                                              fontWeight:
                                                  sortable[index] == _sortable
                                                      ? FontWeight.bold
                                                      : FontWeight.bold,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            const SizedBox(
                              height: 30,
                            ),
                            Expanded(
                              flex: 1,
                              child: Container(
                                margin: EdgeInsets.symmetric(horizontal: 20),
                                child: GridView.count(
                                  crossAxisCount: 2,
                                  shrinkWrap: true,
                                  children: List.generate(
                                      OfflineData.destinationList.length,
                                      (index) {
                                    var item =
                                        OfflineData.destinationList[index];
                                    return Container(
                                      decoration: BoxDecoration(
                                        image: DecorationImage(
                                          image: AssetImage(item["image"]),
                                        ),
                                      ),
                                    );
                                  }),
                                ),
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  );
                },
              ),
            )

我在体内第一个展开的子级之后删除了 singlechildscrollview ,但是当我在 gridview 中向下滚动时,我在屏幕顶部有这个阴影,但是如果我使用 singlechildscrollview 并将 gridview 包装在具有定义高度的容器内,它看起来丑陋,有时并不是所有的孩子都可见。我该如何解决?谢谢 enter image description here

这是我使用 singlechildscrollview 的时候 enter image description here

孩子被割伤,只能看到一小部分。

flutter dart gridview layout widget
1个回答
0
投票

尝试设置 AppBar

shadowColor: Colors.transparent

将海拔高度设置为零。

© www.soinside.com 2019 - 2024. All rights reserved.