整个屏幕滚动，但你只需要一个 widget Flutter

Question

请告诉我。我有一个可滚动的语言列表。但此刻我有整个页面滚动。我怎样才能做到只有包含语言的列表滚动，而其他所有内容（搜索栏、按钮 - 都固定在一个地方）？我在下面附上了一张屏幕截图，显示了我需要滚动的部分，而不是整个屏幕。

Padding(
        padding: const EdgeInsets.only(left: 24, right: 24),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: 178),
              const BackStepWidget(text: 'Select Language'),
              const SizedBox(height: 30),
              SizedBox(
                width: size.width,
                child: Card(
                  color: constants.Colors.greyDark,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(24)),
                  child: Column(
                    children: [
                      const SizedBox(height: 16),
                      Padding(
                        padding: const EdgeInsets.only(left: 16, right: 20),
                        child: Row(
                          children: [
                            Expanded(
                                child: TextFormField(
                              decoration: const InputDecoration(
                                  contentPadding: EdgeInsets.all(7),
                                  filled: true,
                                  fillColor: constants.Colors.greyLight,
                                  hintText: 'Search',
                                  hintStyle:
                                      TextStyle(color: constants.Colors.white),
                                  prefixIcon: Icon(
                                    Icons.search,
                                    color: constants.Colors.white,
                                  ),
                                  suffixIcon: Icon(Icons.keyboard_voice,
                                      color: constants.Colors.white),
                                  border: OutlineInputBorder(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(10)),
                                  )),
                            )),
                            const SizedBox(width: 14),
                            const Text('Cancel',
                                style: constants.Styles.smallBookTextStyleWhite)
                          ],
                        ),
                      ),
                      const SizedBox(height: 14),
                      Padding(
                        padding: const EdgeInsets.only(left: 16),
                        child: MediaQuery.removePadding(
                          context: context,
                          removeTop: true,
                          child: ListView.separated(
                            physics: const NeverScrollableScrollPhysics(),
                            shrinkWrap: true,
                            separatorBuilder: ((context, index) => Divider(
                                height: 2,
                                color:
                                    constants.Colors.white.withOpacity(0.2))),
                            itemCount: language.length,
                            itemBuilder: (context, index) => Padding(
                              padding:
                                  const EdgeInsets.only(top: 9, bottom: 10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    language[index],
                                    style: constants
                                        .Styles.smallBoldTextStyleWhite,
                                  ),
                                  Text(
                                    language[index],
                                    style: constants
                                        .Styles.smallerBookTextStyleWhite,
                                  ),
                                ],
                              ),
                              // ),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      );

Answer 1

好的，问题是您在顶部有 SingleChildScrollView。这就是为什么一切都滚动的原因。

更深的三个你有 ListView.separated 与 physics: const NeverScrollableScrollPhysics() 和 shrinkWrap: true.

ListView 本身是可滚动的，但是 neverScroll 参数阻止了它。此外，收缩包装在这里可能不是一件好事，但这是另一回事。

删除 physics: const NeverScrollableScrollPhysics() 并删除 SingleChildScrollView。

您最终可能会遇到内容溢出问题，但这可以稍微轻松地解决。

UPD：要解决垂直溢出问题：将 ListView 放在 Flexible 内。

简单示例：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('widget.title'),
      ),
      body: Column(
        children: [
          Container(
            height: 50,
            width: double.infinity,
            color: Colors.green,
            child: TextFormField(initialValue: 'Search box here'),
          ),
          Flexible(
            child: ListView.builder(
              itemCount: 100,
              itemBuilder: (_, index) => ListTile(
                title: Text('$index'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

整个屏幕滚动，但你只需要一个 widget Flutter

The whole screen scrolls, but you need only one widget Flutter

dart

flutter

flutter-layout