SingleChildScrollView 不起作用？放置？

Question

我有一张卡片，上面有一些信息。我想将它包装在 SingleChildScrollView 中，因为我有更多的项目要添加到卡片中，但是当我这样做时，屏幕只是空白？我试过把它作为根（脚手架主体）放在卡之前，但它不起作用？

 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需要坐你的填充这对你的身体父部件内。您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。

Answer 2

我遇到了这个，我的问题是我作为SingleChildScrollView一个专栏的孩子。

我通过将我的包裹SingleChildScrollView在一个Expanded小部件中来修复它