使用按钮和滚动将小部件添加到 GridView 时出现问题答案

【问题标题】：Problem adding widget to GridView with button and scroll使用按钮和滚动将小部件添加到 GridView 时出现问题
【发布时间】：2020-01-06 15:00:52
【问题描述】：

起初我有一个 Wrap，通过单击“添加”按钮可以将一张新卡添加到 Wrap。然后我将 Wrap 更改为 GridView 以便我可以添加滚动。但是，现在当我按下按钮时，设备上什么也没有显示，但是如果我将 GridView 改回 Wrap 并热重载，卡片会显示出来吗？我不确定出了什么问题。

我也不能滚动，我知道我做错了什么，但我不知道是什么。

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {

  List<Widget> cards = [];

  dynamic addReusableCard (String activity, int goal, double elapsed){
    return cards.add(ReusableCard(activityText: activity, activityLength: goal, activityTimeElapsed: elapsed,));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Text('TIME CARDS',
              style: TextStyle(
                fontSize: 20.0,
                letterSpacing: 5.0,
              ),),
              Text('You\'re awake for a total of 16h',
                  style: TextStyle(
                    fontSize: 16.0,
                    fontStyle: FontStyle.italic,
                  ),),
              Expanded(
                flex: 9,
                child: GridView.count(
                    crossAxisCount: 2,
                    childAspectRatio: (175.0 / 220.0),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                  children: cards
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(18.0),
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: FloatingActionButton(
                    onPressed: (){
                      setState(() {
                        addReusableCard('reading', 2, 0.3);
                      });
                    },
                    backgroundColor: kAccentColor,
                    elevation: 0.0,
                    child: Icon(Icons.add),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

提前致谢

【问题讨论】：

标签： flutter dart

【解决方案1】：

对于动态列表长度，您应该使用gridView.builder()

以下是相关代码：

Expanded(
  flex: 9,
  child: GridView.builder(
    itemCount: cards.length,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2
    ),
    itemBuilder: (BuildContext context, int index) {
      return cards[index];
    }
  )
),

【讨论】：

谢谢！但是你知道我如何在 Gridview.builder 中定义卡片的宽度和高度吗？我一直在寻找，但找不到方法