這是我第一次使用 Flutter，但在對齊容器時遇到了一些問題。
這是我的代碼：
@override
Widget build(BuildContext context) {
return const MyItem(
imgSrc: 'https://images.unsplash.com/photo-1610655012457-9cbd66fe510b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80',
text: 'Lorem ipsum');
}
class MyItem extends StatelessWidget {
const MyItem(
{Key? key,
required this.imgSrc,
required this.text})
: super(key: key);
final String imgSrc;
final String text;
@override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Stack(children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 3)),
child: Image.network(imgSrc, fit: BoxFit.cover),
),
Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
border: Border.all(color: Colors.orange, width: 3)),
child: Text(
text.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),
]));
}
}
結果是：
但我希望文本lorem ipsum位于底部，而不是靠近頂部。好像alignment: Alignment.bottomCenter不行
我錯過了什么？
uj5u.com熱心網友回復：
您應該使用Align小部件。通過為屬性分配值，alignment容器將擴展以填充其父級并根據給定值將其子級定位在自身內部。
這是示例：
class MyItem extends StatelessWidget {
const MyItem(
{Key? key,
required this.imgSrc,
required this.text})
: super(key: key);
final String imgSrc;
final String text;
@override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Stack(children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 3)),
child: Image.network(imgSrc, fit: BoxFit.cover),
),
Align(
alignment: Alignment.bottomCenter,
Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
border: Border.all(color: Colors.orange, width: 3)),
child: Text(
text.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),),
]));
}
}
uj5u.com熱心網友回復：
您也可以使用以下代碼
class MyItem extends StatelessWidget {
const MyItem({Key? key, required this.imgSrc, required this.text})
: super(key: key);
final String imgSrc;
final String text;
@override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
imgSrc,
),
fit: BoxFit.cover),
border: Border.all(color: Colors.blueAccent, width: 3)),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.orange, width: 3)),
child: Text(
text.toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),
));
}
}
uj5u.com熱心網友回復：
您只需要用Positioned小部件包裝容器小部件，只需告訴底部：0，
import 'package:flutter/material.dart';
class MyItem extends StatelessWidget {
const MyItem ({Key? key}) : super(key: key);
final imgSrc =
'https://images.unsplash.com/photo-1610655012457-9cbd66fe510b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80';
final String text = 'Lorem ipsum';
@override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 3)),
child: Image.network(imgSrc, fit: BoxFit.cover),
),
Positioned(
bottom: 0,
width: MediaQuery.of(context).size.width,
child: Container(
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.orange, width: 3),
),
child: Text(
'$text'.toUpperCase(),
//text.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),
),
],
),
);
}
}
uj5u.com熱心網友回復：
您必須固定 Stack 的高度和寬度，因為它就像一個圖形，中心為 (0,0)。x & y 在容器中有一個從 -1 到 1 的值。你從中心值上升到更接近 -1 和下降 1 與如果你向左 -1 向右 1 相同。
之后，您可以使用 AlignmentDirectional 來確定您想將堆疊中的 chid 放在哪里。在您的情況下，如下所示。
對齊（對齊：const AlignmentDirectional（0, 1），孩子：SizedBox（）....
==現在你的代碼必須是這樣的......也同樣審查評論。
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * 1,
//Master container size of mobile screen and limits of stack.
height: MediaQuery.of(context).size.height * 1,
decoration: BoxDecoration(
border: Border.all(color: Colors.purple, width: 3),
),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(0, 0),
child: Container(
width:
MediaQuery.of(context).size.width * 1, //You can fix your own
height: MediaQuery.of(context).size.height * 1,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 3),
),
child: Image.network(imgSrc, fit: BoxFit.cover),
),
),
Align(
alignment: const AlignmentDirectional(0, 1),
child: Container(
width: MediaQuery.of(context).size.width * 1,
//You can fix your own
height: MediaQuery.of(context).size.height * 0.1,
/*alignment: Alignment.bottomCenter,*/
//This will only work inside of container.
decoration: BoxDecoration(
border: Border.all(color: Colors.orange, width: 3),
),
child: Text(
text.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432519.html
標籤：扑
上一篇：使用Flutter動態加載資源
下一篇：如何將容器放置在腳手架上方？