在flutter中使用List进行扩展或伸缩滚动的当前方式

Question

我的屏幕不可滚动，并且具有极限高度（只能在极限高度中滚动）我确实想让我的页面在那里滚动这是我当前的页面：

如果您在上面的gif文件中看到，我的页面是不可滚动的，只能卡在一个框内并且可以滚动在里面，我很喜欢正常地滚动所有页面，因此我应该在这里使用ListView吗？但是我怎样才能使图片和文本像上面那样响应呢？但是我也确实使文本的高度太接近了，我也可以知道你如何缩小列表中的文本吗？

这是我的小部件代码

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          data['title'],
          softWrap: true,
        ),
      ),
      body: Container(
        padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.05),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Align(
                alignment: Alignment.center,
                child: Image.asset(data['image']),
              )
            ),
            Expanded(
              flex: 2,
              child: Align(
                alignment: Alignment.topLeft,
                child: ListView.builder(
                  itemBuilder: (ctx, index) {
                    return Container(
                      height: MediaQuery.of(context).size.width * 0.14,
                      child: ListTile(
                        leading: Icon(Icons.radio_button_checked, size: 17),
                        title: Text(data['ingredients'][index], style: TextStyle(height: 1.3),),
                      )
                    );
                  },
                  itemCount: data['ingredients'].length,
                ),
              )
            )
          ],
        ),
      ),
    );
  }
链接：flutter codepen 

我的屏幕不可滚动，并且具有限制高度（只能在限制高度中滚动），我确实想使页面在此处可滚动，这是我当前的页面：如果您在gif中看到...

Answer 1

SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height*2,
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.05),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Container(child: Image.network('your img')),
              Expanded(
                  flex: 2,
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: ListView.builder(
                      itemBuilder: (ctx, index) {
                        return Container(
                            height: MediaQuery.of(context).size.width * 0.14,
                            child: ListTile(
                              leading: Icon(Icons.radio_button_checked, size: 17),
                              title: Text("data['ingredients'][index]", style: TextStyle(height: 1.3),),
                            )
                        );
                      },
                      itemCount:25,
                    ),
                  )
              )
            ],
          ),
        ),
      ),