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是您身体的父窗口小部件。您的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在屏幕上显示。

SingleChildScrollView无法正常工作？放置？

1 个答案: