Question

我遇到gridview和column的问题。在这种情况下，我想在gridview的上部放置一个图像。请给我一个解决方案..

>>> repl = r'\1'
>>> re.sub('(X)', repl.replace('\\', '\\\\'), 'X')
'\\1'

这就是结果： Flutter Gridview in Column

Answer 1

您只需要将网格视图放入Expanded小部件中，例如：

body: new Column(
  children: <Widget>[
    new Expanded(
      child: GridView.count(
        // Create a grid with 2 columns. If you change the scrollDirection to
        // horizontal, this would produce 2 rows.
        crossAxisCount: 2,
        // Generate 100 Widgets that display their index in the List
        children: List.generate(10, (index) {
          return _buildCard(index);
        }),
      ),
    ),
    new Text("text")
  ],
),

Answer 2

如果Column是GridView的父级，则它将呈现为发生这种情况是因为Column和GridView都分别占据了整个屏幕空间，这是默认行为（默认滚动轴为“垂直”）。

解决方案：

要解决上述问题，我们必须禁用GridView的滚动，这可以通过收缩包装和物理属性来实现

shrinkWrap：true -使用此GridView仅占用其所需的空间

物理：NeverScrollableScrollPhysics（）-它禁用GridView的滚动功能，这意味着现在只有SingleChildScrollView提供滚动功能。

代码：

SingleChildScrollView
   Column
        GridView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                //...
                )

Answer 3

@RuslanLeshchenko提到的答案是正确的，但是如果仍然无法解决问题，请尝试在GridView上尝试以下属性

尝试将shrinkwrap更改为true
应用physics: BouncingScrollPhysics()

Answer 4

错误原因：

Column沿主轴方向（垂直轴）扩展到最大尺寸，GridView扩展（默认滚动方向为垂直）

解决方案

您需要限制GridView的高度，以便使其扩展以填充Column内的剩余空间，有几种方法可以解决此问题，请使用更适合您的方法。

如果要允许GridView占用Column内的所有剩余空间，请使用Flexible。

Column(
  children: <Widget>[
    Flexible(
      child: GridView(...),
    )
  ],
)

如果要将GridView限制为某些height，则可以使用SizedBox。

Column(
  children: <Widget>[
    SizedBox(
      height: 200, // constrain height
      child: GridView(...),
    )
  ],
)

如果您的GridView很小，则可以尝试在其上使用shrinkWrap属性。

Column(
  children: <Widget>[
    GridView(
      shrinkWrap: true, // use it
    )
  ],
)

Answer 5

只需用脚手架和滚动视图包裹

Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: Column(
            children: [ 
          ...

也在对话模型上进行了测试。

Answer 6

尝试将GridView的childAspectRatio属性更改为0.8或更低。

Answer 7

body:Container(
   body: Container(
          child: Column(
            children: [
              Text('Exemple'),
              Expanded(
                child: GridView.count(
                    children: <Widget>[
                          //Widgets
                    ]
               )
             )
           ]
         )
       )

Answer 8

只需将具有自定义高度和宽度的 Gridview 放入容器即可：D

列中的Flutter Gridview。什么解决方案..？

8 个答案: