dart

Question

我正在尝试使用单个子滚动视图小部件使我的 flutter 页面可滚动。但是这样做之后，屏幕的整个小部件布局就乱七八糟了。下面我附上了我的应用程序的屏幕截图，它显示了我想要发生的事情，而不是我使用单个子滚动视图小部件后发生的事情。

import 'package:flutter/material.dart';
import 'package:formula1_app/models/driver_model.dart';

class DriverBioScreen extends StatefulWidget {

  final Driver driver;

  DriverBioScreen({required this.driver});

  @override
  _DriverBioScreenState createState() => _DriverBioScreenState();
}

class _DriverBioScreenState extends State<DriverBioScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 1500,
              width: MediaQuery.of(context).size.width,
              child: Stack(
                children: [
                  Container(
                    height: 250,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(30),
                      
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(30),
                      child: Image(
                        image: AssetImage('assets/images/driver_profile_bg_darken.jpg'),
                        fit: BoxFit.cover,
                      )
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(vertical: 30, horizontal: 20),
                    child: Row(
                      children: [
                        IconButton(
                          icon: Icon(Icons.arrow_back),
                          iconSize: 30,
                          color: Colors.white,
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        )
                      ],
                    ),
                  ),
                  SafeArea(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 0, left: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              Container(
                                height: 80,
                                width: 4,
                                decoration: BoxDecoration(
                                  color: Colors.blue[800]
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(left: 10),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      widget.driver.firstName,
                                      style: TextStyle(
                                        fontSize: 25,
                                        color: Colors.white
                                      ),
                                    ),
                                    Text(
                                      widget.driver.lastName,
                                      style: TextStyle(
                                        fontSize: 32,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold
                                      ),
                                    ),
                                    Row(
                                      children: [
                                        Text(
                                          widget.driver.number,
                                          style: TextStyle(
                                            fontSize: 18,
                                            color: Colors.white,
                                            fontWeight: FontWeight.bold
                                          ),
                                        ),
                                        Text(
                                          ' | ${widget.driver.team}',
                                          style: TextStyle(
                                            fontSize: 18,
                                            color: Colors.white,
                                          ),
                                        )
                                      ],
                                    )
                                  ],
                                ),
                              ),
                            ],
                          ),
                          Image(
                            image: AssetImage(widget.driver.driverImageUrl),
                            height: 200, // 200
                            width: 200, //200
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            Column(
              children: [
                Column(
                  children: [
                    Text(
                      "Achievements",
                      style: TextStyle(
                        fontSize: 32,
                        fontWeight: FontWeight.bold
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 0, left: 20),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            height: 400,
                            width: 228,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Text(
                                  'Wins',
                                  style: TextStyle(
                                    fontSize: 30,
                                    fontWeight: FontWeight.bold
                                  ),
                                ),
                                Text(
                                  'Podiums',
                                  style: TextStyle(
                                    fontSize: 30,
                                    fontWeight: FontWeight.bold
                                  ),
                                ),
                                Text(
                                  'DHL Fastest Laps',
                                  style: TextStyle(
                                    fontSize: 25,
                                    fontWeight: FontWeight.bold
                                  ),
                                ),
                                Text(
                                  'Grands Prix Entered',
                                  style: TextStyle(
                                    fontSize: 25,
                                    fontWeight: FontWeight.bold
                                  ),
                                ),
                                Text(
                                  'World Championships',
                                  style: TextStyle(
                                    fontSize: 25,
                                    fontWeight: FontWeight.bold
                                  ),
                                )
                              ],
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 80),
                            child: Container(
                              height: 400,
                              width: 100,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Padding(
                                    padding: EdgeInsets.only(top: 29),
                                    child: Text(
                                      (widget.driver.wins),
                                      style: TextStyle(
                                        fontSize: 30
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(top: 29),
                                    child: Text(
                                      widget.driver.podiums,
                                      style: TextStyle(
                                        fontSize: 30
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(top: 25),
                                    child: Text(
                                      widget.driver.fastestLap,
                                      style: TextStyle(
                                        fontSize: 30
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(top: 40),
                                    child: Text(
                                      widget.driver.gpEntered,
                                      style: TextStyle(
                                        fontSize: 30
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(top: 59),
                                    child: Text(
                                      widget.driver.worldchampionships,
                                      style: TextStyle(
                                        fontSize: 30,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    Column(
                      children: [
                        Text(
                          'Team',
                          style: TextStyle(
                            fontSize: 32,
                            fontWeight: FontWeight.bold
                          ),
                        ),
                        // Image(
                        //   image: AssetImage(widget.driver.team),
                        // )
                      ],
                    ),
                
                  ],
                ),
              ],
            )///,
          ],
        ),
      )
    );
  }
}

This is a screenshot of what I wanted

This is what happens after i added the singlechildscrolview widget

Answer 1

您可以使用ListView

class _DriverBioScreenState extends State<DriverBioScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Container(
            height: 1500,
            width: MediaQuery.of(context).size.width,
            child: Stack(
              children: [
                Container(
                  height: 250,
                  width: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: ClipRRect(
                      borderRadius: BorderRadius.circular(30),
                      child: Image(
                        image: AssetImage(
                            'assets/images/driver_profile_bg_darken.jpg'),
                        fit: BoxFit.cover,
                      )),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 30, horizontal: 20),
                  child: Row(
                    children: [
                      IconButton(
                        icon: Icon(Icons.arrow_back),
                        iconSize: 30,
                        color: Colors.white,
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      )
                    ],
                  ),
                ),
                SafeArea(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 0, left: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            Container(
                              height: 80,
                              width: 4,
                              decoration:
                                  BoxDecoration(color: Colors.blue[800]),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(left: 10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    widget.driver.firstName,
                                    style: TextStyle(
                                        fontSize: 25, color: Colors.white),
                                  ),
                                  Text(
                                    widget.driver.lastName,
                                    style: TextStyle(
                                        fontSize: 32,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  Row(
                                    children: [
                                      Text(
                                        widget.driver.number,
                                        style: TextStyle(
                                            fontSize: 18,
                                            color: Colors.white,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      Text(
                                        ' | ${widget.driver.team}',
                                        style: TextStyle(
                                          fontSize: 18,
                                          color: Colors.white,
                                        ),
                                      )
                                    ],
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                        Image(
                          image: AssetImage(widget.driver.driverImageUrl),
                          height: 200, // 200
                          width: 200, //200
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
          Column(
            children: [
              Column(
                children: [
                  Text(
                    "Achievements",
                    style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 0, left: 20),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          height: 400,
                          width: 228,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Text(
                                'Wins',
                                style: TextStyle(
                                    fontSize: 30, fontWeight: FontWeight.bold),
                              ),
                              Text(
                                'Podiums',
                                style: TextStyle(
                                    fontSize: 30, fontWeight: FontWeight.bold),
                              ),
                              Text(
                                'DHL Fastest Laps',
                                style: TextStyle(
                                    fontSize: 25, fontWeight: FontWeight.bold),
                              ),
                              Text(
                                'Grands Prix Entered',
                                style: TextStyle(
                                    fontSize: 25, fontWeight: FontWeight.bold),
                              ),
                              Text(
                                'World Championships',
                                style: TextStyle(
                                    fontSize: 25, fontWeight: FontWeight.bold),
                              )
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(left: 80),
                          child: Container(
                            height: 400,
                            width: 100,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(top: 29),
                                  child: Text(
                                    (widget.driver.wins),
                                    style: TextStyle(fontSize: 30),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 29),
                                  child: Text(
                                    widget.driver.podiums,
                                    style: TextStyle(fontSize: 30),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 25),
                                  child: Text(
                                    widget.driver.fastestLap,
                                    style: TextStyle(fontSize: 30),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 40),
                                  child: Text(
                                    widget.driver.gpEntered,
                                    style: TextStyle(fontSize: 30),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 59),
                                  child: Text(
                                    widget.driver.worldchampionships,
                                    style: TextStyle(
                                      fontSize: 30,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Column(
                    children: [
                      Text(
                        'Team',
                        style: TextStyle(
                            fontSize: 32, fontWeight: FontWeight.bold),
                      ),
                      // Image(
                      //   image: AssetImage(widget.driver.team),
                      // )
                    ],
                  ),
                ],
              ),
            ],
          )

          ///,
        ],
      ),
    );
  }
}

Answer 2

用扩展包住图像小部件

    Expanded(
        child:Image(
           image: AssetImage(widget.driver.driverImageUrl),
           height: 200, // 200
           width: 200, //200
         ),
),

因为您的图片小部件占用了所有 space

dart - flutter single child scroll view 更改屏幕的小部件布局

dart - flutter single child scroll view changes widget layout of screen

widget

flutter

singlechildscrollview