我的Flutter应用程序有一个布局问题。我创建了一个MyCardWidget,其中包含一个Card小部件。在卡片内部,我尝试使用列和mainAxisAlignment将其内容居中:MainAxisAlignment.center和crossAxisAlignment:CrossAxisAlignment.center.但是,当我将多个MyCardWidget示例放在一个水平ListView中时,卡片的位置并没有像预期的那样居中。
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Center(child: Text('Hata: ${snapshot.error.toString()}'));
} else {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/home.jpg'),
fit: BoxFit.cover,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Istanbul 20"),
SizedBox(
width: MediaQuery.of(context).size.width,
height: 150,
child: Obx(() => ListView(
scrollDirection: Axis.horizontal,
children: cards
.map((card) => card)
.toList(),
)),
)
这是卡Widget
class _MyCardWidgetState extends State<MyCardWidget> {
@override
Widget build(BuildContext context) {
return Card(
color: Colors.transparent,
elevation: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // <-- Bu satırı ekledik
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.network(
"https://openweathermap.org/img/wn/${widget.icon}@2x.png"),
Text(widget.temp.value),
// Diğer String verilerini kullanabilirsiniz
],
),
);
}
1条答案
按热度按时间wxclj1h51#
使用
Center
小部件 PackageListView
,并在ListView上添加shrinkWrap: true
。