flutter - 颤振背景图像
问题描述
我对颤振非常陌生,我正在制作一个有趣的应用程序。我想向我的应用程序添加背景图像,但我找不到如何。我知道我必须把它放进去,BuildContext context
但我找不到怎么做。这是我的代码:
import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
typedef void OnError(Exception exception);
void main() {
runApp(new MaterialApp(debugShowCheckedModeBanner: false,home: LocalAudio()));
}
class LocalAudio extends StatefulWidget {
@override
_LocalAudio createState() => _LocalAudio();
}
class _LocalAudio extends State<LocalAudio> {
Duration _duration = new Duration();
Duration _position = new Duration();
AudioPlayer advancedPlayer;
AudioCache audioCache;
@override
void initState() {
super.initState();
initPlayer();
}
void initPlayer() {
advancedPlayer = new AudioPlayer();
audioCache = new AudioCache(fixedPlayer: advancedPlayer);
advancedPlayer.durationHandler = (d) => setState(() {
_duration = d;
});
advancedPlayer.positionHandler = (p) => setState(() {
_position = p;
});
}
String localFilePath;
Widget _tab(List<Widget> children) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: children
.map((w) => Container(child: w, padding: EdgeInsets.all(6.0)))
.toList(),
),
),
],
);
}
Widget _btn(String txt, VoidCallback onPressed) {
return ButtonTheme(
minWidth: 48.0,
child: Container(
width: 150,
height: 150,
child: RaisedButton(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Text(txt),
color: Colors.greenAccent[900],
textColor: Colors.white,
onPressed: onPressed),
),
);
}
Widget LocalAudio() {
return _tab([
_btn('Play', () => audioCache.play('bruh.mp3')),
]);
}
void seekToSecond(int second) {
Duration newDuration = Duration(seconds: second);
advancedPlayer.seek(newDuration);
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 1,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 1.0,
backgroundColor: Colors.teal,
title: Center(child: Text('BRUH')),
),
body: TabBarView(
children: [LocalAudio()],
),
),
);
}
}
解决方案
我只需将脚手架的主体设置为 Stack(),然后将图像放在堆栈的底部。应该看起来像这样。
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 1,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 1.0,
backgroundColor: Colors.teal,
title: Center(child: Text('BRUH')),
),
body: Stack(
children: [
Image.asset('assets/images/background.jpg'),
TabBarView(
children: [LocalAudio()],
),
]
);
),
推荐阅读
- javascript - JS 倒数计时器停在零处
- angular - 动态添加具有自己工具栏的羽毛笔编辑器
- python - 将代码放入函数中时出现 KeyError
- rust - 如何在 Rust 中正确使用 `peek()`?
- cuda - 2020 年 CUDA 驱动程序 API 与运行时 API
- c# - 不能将表“AspNetRoleClaims”用于实体类型“IdentityRoleClaim”
' 因为它被用于实体类型 'AspNetRoleClaims' - reactjs - 如何从axios返回数据响应
- three.js - 直接在 THREE.OrbitControls() 中设置纬度和经度
- object - phoneNumber 在 stwe/Datatablesbundle 上显示为 [object Object]
- reactjs - 父组件中的精确路由会阻塞子组件中的路由吗?