Flutter 可拖动的可滚动工作表答案

【问题标题】：Flutter draggable scrollable sheetFlutter 可拖动的可滚动工作表
【发布时间】：2020-08-04 16:27:00
【问题描述】：

有谁知道为什么我的可拖动滚动表不起作用或为什么我看不到它？我尝试了另一种可行的方式，但我没有使用 SafeArea-Widget，

import 'package:flutter/material.dart';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(100.0),
        child: AppBar(
          //AppBar
      ),
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 20),
              child: Text(
                dateday,
                style: TextStyle(
                  color: Color(0xff2C8E5D),
                  fontSize: 150,
                ),
              ),
            ),
            SizedBox.expand(
              child: DraggableScrollableSheet(builder:
                  (BuildContext context, ScrollController scrollController) {
                return Container(
                  color: Colors.red,
                  child: ListView.builder(
                      controller: scrollController,
                      itemCount: 25,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(title: Text("Item $index"));
                      }),
                );
              }),
            ),
          ],
        ),
      ),
    );
  }
}

感谢您的帮助！

【问题讨论】：

标签： flutter dart

【解决方案1】：

将ListView 替换为Stack：

body: SafeArea(
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 20),
              child: Text(
                dateday,
                style: TextStyle(
                  color: Color(0xff2C8E5D),
                  fontSize: 150,
                ),
              ),
            ),
            SizedBox.expand(
              child: DraggableScrollableSheet(
                  builder:
                  (BuildContext context, ScrollController scrollController) {
                return Container(
                  color: Colors.red,
                  child: ListView.builder(
                      controller: scrollController,
                      itemCount: 25,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(title: Text("Item $index"));
                      }),
                );
              }),
            ),
          ],
        ),
      ),

【讨论】：

【解决方案2】：

您可以使用LayoutBuilder和BoxConstraints提供height并使用Expanded flex控制DraggableScrollableSheet的滚动区域
代码sn-p

SafeArea(
  child: LayoutBuilder(builder: (context, constraints) {    
    return ConstrainedBox(
      constraints: BoxConstraints(maxWidth: constraints.maxWidth),
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Padding(
              padding: EdgeInsets.only(left: 20),
              child: Text(
                "dateday",
          ...
          Expanded(
            flex: 3,
            child: SizedBox.expand(

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('DraggableScrollableSheet'),
        ),
        body: SafeArea(
          child: LayoutBuilder(builder: (context, constraints) {
            print(constraints.maxWidth);
            print(constraints.minWidth);
            return ConstrainedBox(
              constraints: BoxConstraints(maxWidth: constraints.maxWidth),
              child: Column(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Padding(
                      padding: EdgeInsets.only(left: 20),
                      child: Text(
                        "dateday",
                        style: TextStyle(
                          color: Color(0xff2C8E5D),
                          fontSize: 150,
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: SizedBox.expand(
                      child: DraggableScrollableSheet(builder:
                          (BuildContext context,
                              ScrollController scrollController) {
                        return Container(
                          color: Colors.red,
                          child: ListView.builder(
                              controller: scrollController,
                              itemCount: 25,
                              itemBuilder: (BuildContext context, int index) {
                                return ListTile(title: Text("Item $index"));
                              }),
                        );
                      }),
                    ),
                  ),
                ],
              ),
            );
          }),
        ));
  }
}

【讨论】：