Flutter实现顶部固定扫码组件+下方可滚动区域的问题求助

你的核心问题是错误地将扫码框和滚动内容放在同一个可滚动容器内，导致整个页面滚动。只需调整布局结构，让扫码框固定在顶部，下方内容单独用SingleChildScrollView包裹即可。

关键修改思路 #

1. 将Scaffold的body改为Column，分为上下两部分：
   • 顶部：固定高度的MobileScanner组件，不参与滚动
   • 底部：用Expanded包裹SingleChildScrollView，占据剩余屏幕空间，内部放置所有按钮、输入框等可滚动内容
2. 移除原代码中多余的IntrinsicHeight和嵌套的Expanded（这些会干扰布局约束）

修改后的完整example_screen.dart核心代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Example screen"),
      backgroundColor: Colors.deepOrange[400],
    ),
    body: Column(
      children: [
        // 顶部固定的扫码预览框
        SizedBox(
          height: 500,
          child: MobileScanner(
            controller: controller,
          ),
        ),
        // 下方可滚动区域
        Expanded(
          child: SingleChildScrollView(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      flex: 3,
                      child: ElevatedButton(
                        onPressed: () async {
                          setState(() {
                            activeBarcodeNum = 1;
                          });
                          controller.start();
                        },
                        child: const Text(
                          'Scan',
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Text('Tag: ${_barcode == null ? 'N/A' : _barcode!.rawValue.toString()}'),
                      ),
                    ),
                  ],
                ),
                // 复制原代码中剩余的所有Row组件
                Row(
                  children: [
                    Expanded(
                      flex: 3,
                      child: ElevatedButton(
                        onPressed: () async {
                          setState(() {
                            activeBarcodeNum = 1;
                          });
                          controller.start();
                        },
                        child: const Text(
                          'Scan',
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Text('Tag: ${_barcode == null ? 'N/A' : _barcode!.rawValue.toString()}'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Expanded(
                      flex: 3,
                      child: ElevatedButton(
                        onPressed: () async {
                          setState(() {
                            activeBarcodeNum = 1;
                          });
                          controller.start();
                        },
                        child: const Text(
                          'Scan',
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Text('Tag: ${_barcode == null ? 'N/A' : _barcode!.rawValue.toString()}'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Expanded(
                      flex: 3,
                      child: ElevatedButton(
                        onPressed: () async {
                          setState(() {
                            activeBarcodeNum = 4;
                          });
                          controller.start();
                        },
                        child: const Text(
                          'Scan',
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Text('Tag: ${_barcode == null ? 'N/A' : _barcode!.rawValue.toString()}'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Expanded(
                      flex: 3,
                      child: ElevatedButton(
                        onPressed: () async {
                          setState(() {
                            activeBarcodeNum = 4;
                          });
                          controller.start();
                        },
                        child: const Text(
                          'Scan',
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Text('Tag: ${_barcode == null ? 'N/A' : _barcode!.rawValue.toString()}'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Expanded(
                      flex: 3,
                      child: ElevatedButton(
                        onPressed: () async {
                          setState(() {
                            activeBarcodeNum = 4;
                          });
                          controller.start();
                        },
                        child: const Text(
                          'Scan',
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Text('Tag: ${_barcode == null ? 'N/A' : _barcode!.rawValue.toString()}'),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Expanded(
                      flex: 3,
                      child: ElevatedButton(
                        onPressed: () async {
                          setState(() {
                            activeBarcodeNum = 4;
                          });
                          controller.start();
                        },
                        child: const Text(
                          'Scan',
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Padding(
                        padding: const EdgeInsets.all(18.0),
                        child: Text('Tag: ${_barcode == null ? 'N/A' : _barcode!.rawValue.toString()}'),
                      ),
                    ),
                  ],
                ),
                // 输入框与提交按钮
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  child: TextField(
                    controller: textController1,
                    keyboardType: TextInputType.number,
                    inputFormatters: <TextInputFormatter>[
                      FilteringTextInputFormatter.digitsOnly
                    ],
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Quantity',
                      hintText: 'Quantity'
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: TextField(
                    controller: textController2,
                    maxLines: 5,
                    decoration: InputDecoration(
                      hintText: "Enter notes here",
                      enabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.grey),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Colors.black,
                          width: 2,
                        ),
                        borderRadius: BorderRadius.circular(15),
                      ),
                      errorBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Colors.red,
                          width: 2,
                        ),
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 70,
                  width: 250,
                  decoration: BoxDecoration(
                    color: Colors.green, borderRadius: BorderRadius.circular(20)),
                  child: TextButton(
                    onPressed: () {
                      final quantStr = textController1.text;
                      if (quantStr.isNotEmpty) {
                        // TODO: 处理输入值
                      }
                      // AutoRouter.of(context).popAndPush(HomeRoute());
                    },
                    child: const Text(
                      'SUBMIT',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                ),
                const SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

关于auto_route和状态管理的说明 #

不需要单独把扫码功能拆成新页面，当前布局调整就能实现需求。如果后续需要在多个页面共享扫码结果或状态，可以选择轻量的状态管理方案：

• 用Provider封装MobileScannerController和扫码结果，在需要的页面读取
• 或者用Riverpod的StateNotifier管理扫码状态，跨页面访问更灵活

内容的提问来源于stack exchange，提问作者Crushing