Question

我正在开发一个应用，并且正在跟踪link中的示例，并遇到一个问题，该问题说底部溢出xx个像素，如下所示：

现在，我之前遇到过此问题，并通过添加SingleChildScrollView来解决它，如下所示：

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Academy',
      theme: new ThemeData(
        primaryColor: Color.fromRGBO(58, 66, 86, 1.0)
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold( 
        body: new Container(
          child: SingleChildScrollView(
            child: LoginScreen(),
          )
        ),
      ),
    );
  }

当我不使用容器而是使用列时，该怎么办？这就是我在上图中使用的（代码底部的列，作者返回了脚手架）：

class DetailPage extends StatelessWidget {
  final Lesson lesson;
  DetailPage({Key key, this.lesson}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final levelIndicator = Container(
      child: Container(
        child: LinearProgressIndicator(
            backgroundColor: Color.fromRGBO(209, 224, 224, 0.2),
            value: lesson.indicatorValue,
            valueColor: AlwaysStoppedAnimation(Colors.green)),
      ),
    );

    final coursePrice = Container(
      padding: const EdgeInsets.all(7.0),
      decoration: new BoxDecoration(
          border: new Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(5.0)),
      child: new Text(
        "\$" + lesson.price.toString(),
        style: TextStyle(color: Colors.white),
      ),
    );

    final topContentText = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        SizedBox(height: 120.0),
        Icon(
          Icons.directions_car,
          color: Colors.white,
          size: 40.0,
        ),
        Container(
          width: 90.0,
          child: new Divider(color: Colors.green),
        ),
        SizedBox(height: 10.0),
        Text(
          lesson.title,
          style: TextStyle(color: Colors.white, fontSize: 45.0),
        ),
        SizedBox(height: 30.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(flex: 1, child: levelIndicator),
            Expanded(
                flex: 6,
                child: Padding(
                    padding: EdgeInsets.only(left: 10.0),
                    child: Text(
                      lesson.level,
                      style: TextStyle(color: Colors.white),
                    ))),
            Expanded(flex: 1, child: coursePrice)
          ],
        ),
      ],
    );

    final topContent = Stack(
      children: <Widget>[
        Container(
            padding: EdgeInsets.only(left: 10.0),
            height: MediaQuery.of(context).size.height * 0.5,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage("assets/images/drones1.jpg"),
                fit: BoxFit.cover,
              ),
            )),
        Container(
          height: MediaQuery.of(context).size.height * 0.5,
          padding: EdgeInsets.all(40.0),
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, .9)),
          child: Center(
            child: topContentText,
          ),
        ),
        Positioned(
          left: 8.0,
          top: 60.0,
          child: InkWell(
            onTap: () {
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back, color: Colors.white),
          ),
        )
      ],
    );

    final bottomContentText = Text(
      lesson.content,
      style: TextStyle(fontSize: 18.0),
    );
    final readButton = Container(
        padding: EdgeInsets.symmetric(vertical: 16.0),
        width: MediaQuery.of(context).size.width,
        child: RaisedButton(
          onPressed: () => {},
          color: Color.fromRGBO(58, 66, 86, 1.0),
          child:
              Text("TAKE THIS LESSON", style: TextStyle(color: Colors.white)),
        ));
    final bottomContent = Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.all(40.0),
      child: Center(
        child: Column(
          children: <Widget>[bottomContentText, readButton],
        ),
      ),
    );

    return Scaffold(
      body: Column(                  //here is the column
        children: <Widget>[topContent, bottomContent],
      ),
    );
  }
}

我尝试了这些，但没有用，给我与以前相同的结果：

    return Scaffold(
      body: Container(child: SingleChildScrollView(child:Column(children: <Widget>[topContent, bottomContent],),),),
    );

    return Scaffold(
      body: Column(           
        children: <Widget>[Expanded(child: Column(children: <Widget>[topContent, bottomContent],))],
      ),
    );

    return Scaffold(
      body: SingleChildScrollView(child: Container(child:Column(children: <Widget>[topContent, bottomContent],),),),
    );

我按照建议尝试此操作时的结果：

    return Scaffold(
      body: Column(                  //here is the column
        children: <Widget>[Expanded(child: SingleChildScrollView(child: Text("Test"))), Text("Data")],
      ),
    );

Answer 1

我通过将SingleChildScrollView添加到topContent中的以下内容来解决了这个问题：

        Container(
          height: MediaQuery.of(context).size.height * 0.5,
          padding: EdgeInsets.all(40.0),
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, .9)),
          child: SingleChildScrollView(
            child: Center(
              child: topContentText,
            ),
          ),
        ),

如何将SingleChildScrollView添加到列

1 个答案: