flutter - SingleChildScrollView无法正常工作？放置？

Question

我有一张正在显示的卡片，上面有一些信息。我想将其包装在SingleChildScrollView中，因为我还有更多项目要添加到卡中，但是当我这样做时，屏幕只是空白吗？我曾尝试将其作为根(脚手架主体)放在Card之前，但无法正常工作？

 return Scaffold(
        backgroundColor: globals.pageBackgroundColor,
        appBar: AppBar(
            title: Text('Company name'),
            leading: new IconButton(
                icon: new Icon(Icons.arrow_back),
                onPressed: () {
                  Navigator.pop(context, true);
                })),
        body: Padding(
            padding: EdgeInsets.all(10),
            child: Card(
                child: Container(
                    decoration:
                        BoxDecoration(color: globals.widgetBackgroundColor),
                    child: Column(
                      children: <Widget>[
                      Container(
                          height: 120,
                          width: double.infinity,
                          decoration: BoxDecoration(color: Colors.white),
                          child: Row(
                            children: <Widget>[
                              Padding(
                                  padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                                  child: Container(
                                      alignment: Alignment.centerLeft,
                                      width: 100,
                                      height: 100,
                                      child: Image.network("https://via.placeholder.com/200"))),
                              Expanded(
                                child: Padding(
                                    padding: EdgeInsets.fromLTRB(30, 20, 10, 0),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text('Company name',
                                            style: TextStyle(
                                                fontSize: 18,
                                                fontWeight: FontWeight.bold)),
                                        Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum')
                                      ],
                                    )),
                              )
                            ],
                          )),
                      Padding(
                        padding: EdgeInsets.only(left: 20, top: 20, right: 20),
                        child: Container(
                          child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
                                    style: TextStyle(color: Colors.white)),
                                Padding(padding: EdgeInsets.only(top: 25)),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: <Widget>[
                                    Icon(
                                      Icons.thumb_up,
                                      color: Colors.white,
                                    ),
                                    Padding(
                                        padding: EdgeInsets.only(right: 20)),
                                    Text('Lorem ipsum lorem',
                                        style: TextStyle(
                                            color: globals.cardSubTitleColor,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 18))
                                  ],
                                )
                              ]),
                        ),
                      ),
                      Padding(padding: EdgeInsets.only(top: 20)),
                      Expanded(
                              child: GridView.count(
                                padding: EdgeInsets.all(5),
                                  scrollDirection: Axis.horizontal,
                                  crossAxisCount: 1,
                                  children: List.generate(10, (index) {
                                    return Image.network(
                                      "https://via.placeholder.com/200",
                                    );
                                  })))

                    ])))));
  } 

有没有人？我似乎无法弄清楚这一点。

Answer 1

所以我设法弄清楚了这一点。SingleChildScrollView需要位于您的Padding内部，Padding是您 body 的父窗口小部件。
您的Card必须是SingleChildScrollView的子代。

此代码应为您工作。

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Company name'),
      leading: new IconButton(
        icon: new Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context, true);
        }
      )
    ),
    body: Padding(
    padding: EdgeInsets.all(10),
    child: SingleChildScrollView(
      child: Card(
            child: Container(
                decoration:
                    BoxDecoration(color: Colors.white),
                child: Column(
                  children: <Widget>[
                  Container(
                      height: 120,
                      width: double.infinity,
                      decoration: BoxDecoration(color: Colors.white),
                      child: Row(
                        children: <Widget>[
                          Padding(
                              padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                              child: Container(
                                  alignment: Alignment.centerLeft,
                                  width: 100,
                                  height: 100,
                                  child: Image.network("https://via.placeholder.com/200"))),
                          Expanded(
                            child: Padding(
                                padding: EdgeInsets.fromLTRB(30, 20, 10, 0),
                                child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text('Company name',
                                        style: TextStyle(
                                            fontSize: 18,
                                            fontWeight: FontWeight.bold)),
                                    Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum')
                                  ],
                                )),
                          )
                        ],
                      )),
                  Padding(
                    padding: EdgeInsets.only(left: 20, top: 20, right: 20),
                    child: Container(
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
                                style: TextStyle(color: Colors.blue)),
                            Padding(padding: EdgeInsets.only(top: 25)),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: <Widget>[
                                Icon(
                                  Icons.thumb_up,
                                  color: Colors.white,
                                ),
                                Padding(
                                    padding: EdgeInsets.only(right: 20)),
                                Text('Lorem ipsum lorem',
                                    style: TextStyle(
                                        color: Colors.red,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 18))
                            ],
                          )
                        ]
                      ),
                    ),
                  ),
                ]
              )
            )
          )
        )
      )
    )
  );
}
} 

PS 我更改了一些颜色，只是为了查看UI在屏幕上显示。