flutter - 如何在溢出时使列可滚动但在其他情况下使用扩展

Question

我正在尝试实现一种效果，即边栏顶端有可扩展内容，边栏底部有其他链接。当顶部的内容扩展到需要滚动的程度时，底部链接应在同一 View 中滚动。

这是我正在尝试做的一个例子，只是它不滚动。如果我在列周围包裹一个可滚动的 View ，它将无法与分隔符一起使用，也无法将底部链接保持在底部:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() {
    return MyWidgetState();
  }
}

class MyWidgetState extends State<MyWidget> {
  List<int> items = [1];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: const Icon(Icons.add),
              onPressed: () {
                setState(() {
                  items.add(items.last + 1);
                });
              },
            ),
            IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  if (items.length != 1) items.removeLast();
                });
              },
            ),
          ],
        ),
        for (final item in items)
          MyAnimatedWidget(
            child: SizedBox(
              height: 200,
              child: Center(
                child: Text('Top content item $item'),
              ),
            ),
          ),
        Spacer(),
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(border: Border.all()),
          height: 200,
          child: Text('Bottom content'),
        )
      ],
    );
  }
}

class MyAnimatedWidget extends StatefulWidget {
  final Widget? child;

  const MyAnimatedWidget({this.child, Key? key}) : super(key: key);

  @override
  State<MyAnimatedWidget> createState() {
    return MyAnimatedWidgetState();
  }
}

class MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

  @override
  initState() {
    controller = AnimationController(
        value: 0, duration: const Duration(seconds: 1), vsync: this);
    controller.animateTo(1, curve: Curves.linear);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: controller,
        builder: (context, child) {
          return SizedBox(height: 200 * controller.value, child: widget.child);
        });
  }
}

我尝试使用全局键来获取间隔的大小，并在重建后检测间隔的大小是否已设置为 0，如果是，则将整个小部件重新构建为 ListView (没有间隔)的一列。在这种情况下，您还需要倾听，因为如果大小缩小并且需要再次成为列，这似乎会使性能明显变差，在列/ ListView 之间切换时保存状态很棘手，而且似乎不是解决问题的最佳方法。

有什么想法吗？

Answer 1

尝试在没有您拥有的动画的情况下实现我刚刚创建的这个解决方案。是顶部的可滚动区域和持久的页脚。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text("My AppBar"),
          ),
          body: Column(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    children: [

                      // Your scrollable widgets here

                      Container(
                        height: 100,
                        color: Colors.green,
                      ),
                      Container(
                        height: 100,
                        color: Colors.blue,
                      ),
                      Container(
                        height: 100,
                        color: Colors.red,
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                child: Text(
                  'Your footer',
                ),
                color: Colors.blueGrey,
                height: 200,
                width: double.infinity,
              )
            ],
          ),
        ),
      ),
    );
  }
}