You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter如何在嵌套Stack与Card组件中添加列表项

问题根源

too many positional arguments报错由括号嵌套错误导致:你将分割线、班级/学校信息模块错误嵌套进了头像右侧的子列结构中,让部分组件接收了超出其构造函数定义数量的位置参数。同时现有代码存在大量冗余嵌套、布局参数无效的问题,和目标UI效果偏差较大。

修复方案
  • 清理冗余嵌套:删除包裹单个图标的Row、重复的DecoratedBox+Container层(Card组件自带elevation、边框能力,无需额外嵌套装饰容器)、无意义的多层容器包裹
  • 修正组件嵌套层级:将分割线、班级/学校信息行移动到卡片根Column的children队列中,保证组件嵌套符合Flutter组件的参数定义
  • 修正无效布局参数:
    • 原顶部绿色栏中放在Row内的SizedBox(height:11)属于无效写法(Row为水平布局,height参数不会产生垂直间距),改用Padding实现顶部状态栏留白
    • 原Positioned组件的left:0.45/right:0.8边距数值无效,改为20的统一水平边距让卡片正常居中显示
    • 原固定宽度的文本区域改用Expanded包裹,避免小屏幕下文本溢出
  • 调整对齐逻辑:用MainAxisAlignment.spaceBetween替代固定宽度的SizedBox实现用户名和更多按钮的两端对齐,适配不同屏幕宽度
修复后可运行代码
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  static const showGrid = true;
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: 360.0,
        child: Stack(
          children: <Widget>[
            // 顶部绿色背景栏
            Container(
              color: const Color.fromARGB(255, 69, 186, 58),
              width: MediaQuery.of(context).size.width,
              height: 200.0,
              padding: const EdgeInsets.only(top: 40, left: 16, right: 16),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Icon(Icons.add_card, color: Colors.black54),
                  const SizedBox(width: 7.0),
                  const Text(
                    'Tiếng Việt',
                    style: TextStyle(
                        color: Color.fromARGB(150, 0, 0, 0),
                        fontSize: 17.6),
                  ),
                  const Icon(Icons.expand_more, color: Colors.black54)
                ],
              ),
            ),
            // 悬浮信息卡片
            Positioned(
              top: 140.0,
              left: 20.0,
              right: 20.0,
              child: Card(
                color: Colors.white,
                elevation: 10,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      // 头像+用户名+账号行
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            height: 85.0,
                            width: 85.0,
                            decoration: const BoxDecoration(
                                color: Color.fromRGBO(200, 230, 201, 1),
                                shape: BoxShape.circle),
                            child: const Center(
                              child: Text(
                                'Hình',
                                style: TextStyle(fontSize: 20.0),
                              ),
                            ),
                          ),
                          const SizedBox(width: 16),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    const Text(
                                      'Nguyễn Văn A',
                                      style: TextStyle(
                                          color: Colors.black,
                                          fontSize: 17.6,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    const Icon(Icons.more_vert,
                                        color: Colors.green),
                                  ],
                                ),
                                const SizedBox(height: 8.0),
                                const Text('Tài khoản: 096984030_1',
                                    style: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 13)),
                              ],
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 12.0),
                      const Divider(),
                      const SizedBox(height: 12.0),
                      // 班级信息行
                      Row(
                        children: [
                          const Text('Trường lớp:',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 12.0)),
                          const SizedBox(width: 5.0),
                          const Text(
                            'Hoa Baby',
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: 12.6),
                          ),
                        ],
                      ),
                      const SizedBox(height: 8.0),
                      // 学校信息行
                      Row(
                        children: [
                          const SizedBox(width: 66.0),
                          const Expanded(
                            child: Text(
                              'Trường KidsOnline  Kindergarten 2 ',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 12.6),
                            ),
                          ),
                          const Icon(Icons.expand_more,
                              color: Colors.green),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange,提问作者taducv

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.01 23:42:43