Flutter 卡片内容未在水平 ListView 中居中

Question

我的 Flutter 应用程序遇到布局问题。我创建了一个包含卡片小部件的 MyCardWidget。在卡内，我尝试使用带有 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(),
                    )),
                  )

这是卡片小部件

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
        ],
      ),
    );
  }

Answer 1

您用

ListView

小部件包装

Center

并将

 shrinkWrap: true

添加到 ListView 上。

child: Center(
  child: ListView(
    scrollDirection: Axis.horizontal,
    shrinkWrap: true, //not so optimal but work out
    children: [