我最近开始学习抖动,我想添加背景图像,并在上面添加两个扁平按钮,但是我无法做到,我在代码中添加了背景图像,但是我没有用不明白问题所在。有人可以帮我吗?
void main() {
return runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: Text('Ani & genny',
style: TextStyle(
fontFamily: 'Pacifico',
color: Colors.white,
)),
backgroundColor: Colors.red,
),
body: MyApp(),
),
),
);
}
class MyApp extends StatelessWidget {
void navigateToPage() {
print('Button pressed!!!!');
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
SizedBox(
height: 50,
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/Ani.png"),
fit: BoxFit.cover
),
),
),
FlatButton(
child: Image.asset(
'images/li.png',
height: 120,
width: 120,
),
onPressed: () {
navigateToPage();
}),
),
],
),
);
}
}
这里是在图像上放置按钮的示例代码。您可以使用“定位”小部件将其放置在所需的任何位置。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Image.network(
'https://picsum.photos/250?image=9',
),
FlatButton(
child: Text("Submit"),
onPressed: () {
navigateToPage();
}),
],
),
);
}
}
您可以在代码笔上运行此代码here。
FlatButton没有显示,因为您没有给Container
一个height
和width
。通过提供您的Container
高度和宽度进行修复。检查以下代码:
Center(
child: Column(
children: <Widget>[
SizedBox(
height: 50,
),
Container(
// define your desired height here
height: 50,
// define your desired width here
width: 120,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: AssetImage("images/Ani.png"),
fit: BoxFit.cover,
),
),
),
FlatButton(
child: Image.asset(
'images/li.png',
height: 120,
width: 120,
),
onPressed: () {
navigateToPage();
}),
],
),
);
我希望这会有所帮助。