android - 当前在 Flutter 中使用 List 进行扩展或 flex 滚动的方法

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.network('https://i.ibb.co/nrWqyMx/belgium.png'),
              )
            ),
            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,
                ),
              )
            )
          ],
        ),
      ),
    );
  }

链接：颤振代码笔

Answer 1

Scaffold(
      appBar: AppBar(
        title: Text(
          'MyAppBar',
          style:
          TextStyle(color: Colors.cyan[100], fontWeight: FontWeight.bold),
        ),
      ),
      body: ListView(
          children: <Widget>[
            Container(
              child: Image.network
                ('https://i.ibb.co/nrWqyMx/belgium.png'),
            ),
            ListView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              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,
            )
          ],
      ),
    );

Answer 2

您需要将 ScrollView 作为小部件的主容器。像这样的东西：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.red,
        child: SingleChildScrollView(
          child: Column(
            children: [
              Text("Title"),
              ListView.builder(
                shrinkWrap: true,
                itemCount: 3,
                itemBuilder: (context, index) {
                  return Container(
                    height: 300,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      border: Border.all(
                        color: Colors.black,
                        style: BorderStyle.solid
                      )
                    ),
                  );
                },
              )
            ],
          ),
        ),
      )
    );
  }
}