Flutter 可滚动布局答案

【问题标题】：Flutter Scrollable layoutFlutter 可滚动布局
【发布时间】：2021-06-27 09:38:20
【问题描述】：

我正在制作一个包含多个项目的颤动布局。它是一个包含多个小部件的列，其中一个包含多个项目的网格视图。我想让整个布局可滚动，但是即使将主小部件包装在一个单子滚动视图中，它也不能滚动这是代码


class _CustomerDataState extends State<CustomerData> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Customer Data'),
          centerTitle: true,
        ),
        body: _containers());
  }

  Widget _containers() {
    return Container(
      alignment: Alignment.center,
      child: Column(
        // mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Card(elevation: 5.0, child: Text('Information')),
          Card(
            elevation: 5.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[Text('No: '), Text('....')],
            ),
          ),
          Card(
            elevation: 5.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Text('Stages: '), Text('....')],
            ),
          ),
          GridView.count(
            shrinkWrap: true,
            crossAxisCount: 3,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: <Widget>[
              Card(
                  elevation: 5.0,
                  child: Column(
                    children: <Widget>[
                      Icon(Icons.monetization_on),
                      Text('First Stage')
                    ],
                  )),
            ],
          ),
          Row(
            children: <Widget>[
              Card(
                elevation: 8.0,
                child: Text('Words here'),
              ),
              Card(
                elevation: 8.0,
                child: Text('Words here'),
              ),
            ],
          )
        ],
      ),
    );
  }
}

有没有办法让卡片小部件中的图标和文本居中？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

ScrollController 负责滚动行为，但您的 gridview 没有使用它，请考虑创建一个 ScrollController 并将其分配给 gridview

ScrollController _scrollControllerGridView` = ScrollController()

 GridView.count(
            shrinkWrap: true,
            controller: _scrollControllerGridView,
            crossAxisSpacing: 4.0,
...

并使卡片的文本和图标居中只需添加

mainAxisAlignment: MainAxisAlignment.center,

到列，像这样：

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
     Icon(Icons.monetization_on),
     Text('First Stage')
  ],
)

【讨论】：