Flutter 添加 ScrollView 和 Background 图片

Question

您好，我正在尝试将 ScollView 放到我的应用程序中，但问题是我不能同时拥有 ScrollView 和背景图像，所以如果有人可以帮助我解决这个问题（我在这里放置了背景图像，那么我该如何放置现在滚动视图？）我有 2 个工作但不是同时工作，我使用的滚动视图是 singleChildScrollView

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:audioplayers/audio_cache.dart';

void main() {
  runApp(new MaterialApp(
  home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
   @override
   _State createState() => _State();

}

AudioCache cache = new AudioCache(fixedPlayer: new AudioPlayer());

void PlayBest() {

  cache.play('best.mp3');

}

void StopBest() {

 cache.play('pro.mp3');

}
MediaQueryData queryData;



double lecran = queryData.size.width;
double loecran = queryData.size.height;
double ratio = queryData.textScaleFactor;



class MyImagePro extends StatelessWidget {
@override
Widget build(BuildContext context) {
var assetsImage = new AssetImage('assets/iconhd.png');
var image = new Image(image: assetsImage, width: MediaQuery.of(context).size.height/4.5, height: MediaQuery.of(context).size.height/4.5,);
  return new Container(child: image,);
}}

class MyImagePro2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
var assetsImage = new AssetImage('assets/trumpfond.png');
var image = new Image(image: assetsImage, width: MediaQuery.of(context).size.height, height: MediaQuery.of(context).size.longestSide,);
  return new Container(child: image,);
}}


class _State extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(

        body: new Container(
          decoration: new BoxDecoration(image: new DecorationImage(image: new AssetImage("assets/trumpfond.png"), fit: BoxFit.cover)),
            child: new Column( 
            children: <Widget>[
                new Row(
                children: <Widget>[
                  new Padding( padding: EdgeInsets.only(top: 50.0)),

                ],
              ),
              new Row(
                children: <Widget>[
              new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
              new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                ],
              ),
              new Row(
                children: <Widget>[
                  new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/9)),    // LEFT // TOP // RIGHT // BOTTOM //
                  new Text("Song 1"),
                  new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/4.2)),
                  new Text("Song 2"),
                ],
              ),
              new Row(
                children: <Widget>[
              new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
              new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                ],
              ),
              new Row(
                children: <Widget>[
                  new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/9)),    // LEFT // TOP // RIGHT // BOTTOM //
                  new Text("Song 3"),
                  new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/4.2)),
                  new Text("Song 4"),
                ],
              ),
              new Row(
                children: <Widget>[
              new Padding( padding: EdgeInsets.fromLTRB(0.0, 100.0, 0.0, 0.0)),
              new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
              new Padding( padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0)),
              new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                ],
              ),
              new Row(
                children: <Widget>[
                  new Padding( padding: EdgeInsets.fromLTRB(60.0, 10.0, 20.0, 0.0)),    // LEFT // TOP // RIGHT // BOTTOM //
                  new Text("Song 1"),
                  new Padding( padding: EdgeInsets.fromLTRB(140.0, 10.0, 20.0, 0.0)),
                  new Text("Song 2"),
                ],
              ),
            ],
          ),
            ),);
  }

}

Answer 1

您可以使用Stack 和SingleChildScrollView 来实现。

希望以下内容对你有所帮助。

@override
  Widget build(BuildContext context) {
    return new Scaffold(

      body: Stack(
        children: <Widget>[
          new Container(
            decoration: new BoxDecoration(image: new DecorationImage(image: new AssetImage("images/p2.jpg"), fit: BoxFit.fill)),
          ),
          SingleChildScrollView(
            child: new Container(
              color: Colors.transparent,
              child: new Column(
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Padding( padding: EdgeInsets.only(top: 50.0)),

                    ],
                  ),
                  new Row(
                    children: <Widget>[
                      new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
                      new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                    ],
                  ),
                  new Row(
                    children: <Widget>[
                      new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/9)),    // LEFT // TOP // RIGHT // BOTTOM //
                      new Text("Song 1"),
                      new Padding( padding: EdgeInsets.only(left: MediaQuery.of(context).size.height/4.2)),
                      new Text("Song 2"),
                    ],
                  ),
                  new Row(
                    children: <Widget>[
                      new Expanded(child: new FlatButton(onPressed: PlayBest, child: new MyImagePro(),),),
                      new Expanded(child: new FlatButton(onPressed: StopBest, child: new MyImagePro(),),),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }