Question

有人知道为什么我的可拖动滚动页不起作用或者为什么我看不到它吗？我以另一种可行的方式尝试了它，但是我没有使用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"));
                      }),
                );
              }),
            ),
          ],
        ),
      ),
    );
  }
}

感谢您的帮助！

Answer 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"));
                      }),
                );
              }),
            ),
          ],
        ),
      ),

Answer 2

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

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"));
                              }),
                        );
                      }),
                    ),
                  ),
                ],
              ),
            );
          }),
        ));
  }
}

颤动的可拖动滚动表

2 个答案: