0

我有一个带有容器的列，该容器充当标题和下面的小部件的网格视图。我只希望 gridview 是可滚动的，并且标题不会移动并始终显示。

这是我的代码：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.only(left: 24, right: 24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 22),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Message("Hello, Guest!", size: 32),
                      Icon(
                        CustomIcons.statistics,
                        color: AppColors.blue,
                        size: 32.0,
                      ),
                    ],
                  ),
                  SizedBox(height: 14),
                  Message("What worries you now? Select or Add.", size: 14),
                ],
              ),
            ),
            SizedBox(height: 16),
            GridView.count(
              primary: true,
              shrinkWrap: true,
              crossAxisCount: 2,
              crossAxisSpacing: 40.0,
              mainAxisSpacing: 40.0,
              padding: const EdgeInsets.all(20.0),
              children: _items,
            ),
          ],
        ),
      ),
    );
  }
}

当它运行时，我得到一个 renderflex 溢出错误： 在此处输入图像描述

当我按照一些答案的建议将我的 gridview 包装在扩展的小部件中时，滚动超出了范围： 在此处输入图像描述

感谢帮助！

4

4 回答 4

0

用 Column 包裹你的 Column SingleChildScrollView， A Column 总是会尝试收缩包裹它的孩子，使用Expanded告诉ColumnGridView只占用可用空间。

另一种选择是，如果您GridView的大小没有增长太多，则使用shrink-wrap: trueand use physics: const NeverScrollablePhyscis()，这样GridView就不会尝试增长到无限大小。

于 2021-09-25T16:31:40.957 回答
0

您可以将您的Column内部SingleChildScrollView小部件包装起来，以使整个列可滚动。代码应该是：

class HomePage extends StatelessWidget {


const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child:Column(
          children: [
            Container(
              margin: EdgeInsets.only(left: 24, right: 24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 22),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Message("Hello, Guest!", size: 32),
                      Icon(
                        CustomIcons.statistics,
                        color: AppColors.blue,
                        size: 32.0,
                      ),
                    ],
                  ),
                  SizedBox(height: 14),
                  Message("What worries you now? Select or Add.", size: 14),
                ],
              ),
            ),
            SizedBox(height: 16),
            SingleChildScrollView(
              child: GridView.count(
              primary: true,
              shrinkWrap: true,
              crossAxisCount: 2,
              crossAxisSpacing: 40.0,
              mainAxisSpacing: 40.0,
              padding: const EdgeInsets.all(20.0),
              children: _items,
            ),
            ),
          ],
        ),
      ),
    );
  }
}
于 2021-09-25T16:32:28.327 回答
0

使用 SingleChildScrollView 删除扩展并包裹您的安全区域，并在 gridview 中添加 phyiscs:ScrollPhysics()

于 2021-09-25T16:28:01.917 回答
0

您需要使用和小部件Stack的组合。这是如何做到的：ListViewColumn

return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            SizedBox(height: 16),
            ListView(
              shrinkWrap: true,
              children: [
                GridView.count(
                  primary: true,
                  shrinkWrap: true,
                  crossAxisCount: 2,
                  crossAxisSpacing: 40.0,
                  mainAxisSpacing: 40.0,
                  padding: const EdgeInsets.all(20.0),
                  children: [
                    Container(
                      margin: EdgeInsets.all(20),
                      color: Colors.red,
                      height: 200,
                      width: 200,
                    ),
                    Container(
                      margin: EdgeInsets.all(20),
                      color: Colors.amber,
                      height: 200,
                      width: 200,
                    ),
                    Container(
                      margin: EdgeInsets.all(20),
                      color: Colors.blue,
                      height: 200,
                      width: 200,
                    ),
                    Container(
                      margin: EdgeInsets.all(20),
                      color: Colors.green,
                      height: 200,
                      width: 200,
                    ),
                  ],
                ),
              ],
            ),
            Container(
              color: Colors.white,
              height: MediaQuery.of(context).size.height * 0.2,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 22),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text("Hello, Guest!"),
                      Icon(
                        Icons.ac_unit,
                        color: Colors.blue,
                        size: 32.0,
                      ),
                    ],
                  ),
                  SizedBox(height: 14),
                  Text("What worries you now? Select or Add."),
                ],
              ),
            ),
          ],
        ),
      ),
    );
于 2021-09-25T20:25:29.660 回答