Flutter 可拖動容器在另一個容器上的“復雜”UI 設計

Question

我正在嘗試解決我對flutter的想法的UI問題，但我不知道如何去做。

基本上，我在想象一種覆蓋一半屏幕並且可以向上拖動的容器，所以覆蓋后面的信息以顯示這個可拖動容器隱藏的更多信息，如下圖所示。

我曾嘗試使用showModalBottomSheet解決方案，如此處所示，但它不符合我的想法的要求，主要是因為它在屏幕的一部分中不可見，而且當它從屏幕底部開始時它隱藏了菜單欄的圖標，再加上因為它是一個模態，所以它下面的容器完全變暗，看起來不太好，它只會給人一種錯覺，它在它上面一點。

它不一定要覆蓋它下面的容器的所有內容 go 直到一個限制，我知道這是一個懸而未決的問題但是我不知道如何在 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')),
            ),
          );
        },
      ),
    );
  }
}