Flutter "complex" UI 为 Draggable Container 设计 over another Container

Question

我正在尝试解决想法的UI问题flutter，但我不知道如何去做.

基本上，我想象的是一种覆盖一半屏幕并且可以向上拖动的容器，所以覆盖后面的信息以显示更多这个可拖动容器隐藏的信息，比如下图。

我曾尝试使用showModalBottomSheet，如所示，解决方案但它不符合我的想法要求，主要是因为它在屏幕的一部分，并且因为它从屏幕底部开始隐藏了菜单栏的图标，而且因为它是一个模态完全变暗它下面的容器看起来不太好，它应该只给高一点的错觉

它不一定要覆盖下面容器的所有内容，它可以达到一个限制，我知道这是一个悬而未决的问题，但我不知道如何在 flutter 中实现这个想法，因为我有经验不足，如果有人能告诉我如何解决这个问题，我将不胜感激。

Answer 1

DraggableScrollableSheet好像是你想要的，值得注意的是，这个插件不是必须和showModalBottomSheet一起使用。并且根据您的需要，您可以设置 minChildSize 属性来指定最小高度，例如 0.5 表示总高度的 50%。

例如：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHome()));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DraggableScrollableSheet'),
      ),
      body: DraggableScrollableSheet(
        initialChildSize: 0.5,
        minChildSize: 0.5,
        maxChildSize: 1,
        builder: (context, ScrollController controller) {
          return Container(
            color: Colors.grey,
            child: ListView.builder(
              controller: controller,
              itemBuilder: (_, index) => Center(child: Text('$index')),
            ),
          );
        },
      ),
    );
  }
}

Flutter "complex" UI 为 Draggable Container 设计 over another Container

Flutter "complex" UI design for Dragable Container over another Container

flutter

user-interface

flutter-layout