flutter - Flutter 添加 ScrollView 和 Background 图片
问题描述
您好,我正在尝试将 ScollView 放入我的应用程序,但问题是我不能同时拥有 ScrollView 和背景图像,所以如果有人可以帮我解决这个问题(我在这里放置了背景图像,那么我现在如何放置滚动视图? )我有两个工作但不是同时工作,我使用的滚动视图是 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"),
],
),
],
),
),);
}
}
解决方案
您可以使用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(),),),
],
),
],
),
),
),
],
),
);
}
推荐阅读
- linux - .!(|.|git) 在 shell 启动早期导致语法错误,但稍后不会
- apache-poi - 单元格中的“SUM”,带有“POI”(3.17)
- java - 在 VS Code 中导出 jar 文件
- python - Python/Travis-Ci 异常“来自请求 urllib.request.urlretrieve ImportError:未命名模块”
- java - JAXB 不编组循环引用
- c++ - 如果项目被选中,为什么 QGraphicsItem 的孩子不再获得鼠标点击?
- android - 解决编译xamarin app -.MvvmCross - Missing reference mono.android
- javascript - 循环正则表达式创建第二组元素
- java - 无法解析符号“FirebaseFirestore”
- vba - 使用 Excel VBA 将 Word 形状固定在页面上的位置,正是它被粘贴的位置