這是我想要得到的螢屏：
這是我所擁有的：
這是我的代碼：
// Background route
class BackgroundRoute extends StatelessWidget {
const BackgroundRoute({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Background with Image and Text'),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('files/main.jpg'),fit:BoxFit.cover
)
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
// const SizedBox(height: 30),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('files/sheet.jpg'),fit:BoxFit.cover
)
),
),
),
Text('This is a text which length no one knows. Neither you nor me. Possibly the longest text in the world. Or it will end abruptly. Who knows... If you are reading this text, blink twice. If you see a secret meaning in what is written, blink three times.'),
],
),
),
// const SizedBox(height: 30),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
// onPressed: _nextCSV,
child: const Text('OK'),
),
),
Expanded(
child: TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
// onPressed: _nextCSV,
child: const Text('Hide'),
),
),
],
),
),
),
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
// onPressed: _nextCSV,
child: const Text('OK'),
),
],
),
),
// const SizedBox(height: 30),
],
),
),
);
}
}
如您所見，背景并沒有填滿整個螢屏，這是錯誤的。
隱藏按鈕不可見，盡管它存在于我的代碼中并且應該位于 OK 按鈕的右側。
如何修復我的代碼，使其看起來盡可能接近第一張圖片？
uj5u.com熱心網友回復：
試試這個代碼.. 最頂部的容器中缺少高度
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Background with Image and Text'),
),
body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('files/main.jpg'), fit: BoxFit.cover)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
// const SizedBox(height: 30),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('files/sheet.jpg'),
fit: BoxFit.cover)),
),
),
Text(
'This is a text which length no one knows. Neither you nor me. Possibly the longest text in the world. Or it will end abruptly. Who knows... If you are reading this text, blink twice. If you see a secret meaning in what is written, blink three times.'),
],
),
),
// const SizedBox(height: 30),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
// onPressed: _nextCSV,
child: const Text('OK'),
),
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
// onPressed: _nextCSV,
child: const Text('Hide'),
),
],
),
),
// const SizedBox(height: 30),
],
),
),
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497932.html