如何在 Flutter 中将 gridview 包装到具有弯曲边缘的容器中答案

【问题标题】：How can i wrap a gridview into a container with curved edges in Flutter如何在 Flutter 中将 gridview 包装到具有弯曲边缘的容器中
【发布时间】：2022-09-27 16:59:47
【问题描述】：

我是颤振的初学者，仍在尝试解决问题。所以我正在尝试构建这个应用程序（我附上了下面的图片），但我发现很难将 gridview 放入容器中并弯曲容器的边缘或包含边框。我尝试使用 Flexible 来包装 gridview，但我不能用它来弯曲边缘或放置边框。

import \'package:general_quizz/models/first_screen_data.dart\';
import \'package:general_quizz/widgets/sectionBoxed.dart\';

class Sections extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(\'quizz app\'),
      ),
      body: Column(
        children: [
          Container(
              width: double.infinity,
              height: 200,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.redAccent,
              ),
              child: Text(\'Quizz app\')),
          Container(
            decoration: BoxDecoration(
              color:Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(50),
                topRight: Radius.circular(50),
              ),
            ),
            Flexible(
            child: GridView(
              children: DUMMY_CATEGORIES
                  .map(
                    (catData) => SectionBoxed(
                      catData.title,
                      catData.color,
                      catData.id,
                    ),
                  )
                  .toList(),
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20,
              ),
            ),
          ),
        ],
      ),
    );
  }
}```

This is what I\'m trying to recreate. [this][1]


  [I\'m trying to recreate this][2]


  [1]: https://i.stack.imgur.com/GSl11.jpg
  [2]: ![]https://i.stack.imgur.com/3fWCz.jpg

标签： flutter-layout

【解决方案1】：

你必须像这样使用Container 小部件：

         Container(
          child:...,
height:200,
          decoration: BoxDecoration(
            color: Colors.white,
              borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          )),
        );

【讨论】：

使用容器不是问题，问题是如何将 gridview 放入容器中。每次我尝试使用容器内的网格视图时，都会出现错误。
在容器内使用网格视图，您必须在容器内使用height .. 再次查看我的答案。