Question

我不熟悉dart语言，并且想知道如何使页面滚动。这是我要滚动的代码页之一：

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      builder: (context, scrollController) {
        return SingleChildScrollView(
          controller: scrollController,
          child: Scaffold(
            backgroundColor: const Color(0xffffffff),
            body: Stack(
              children: <Widget>[
                Transform.translate(
                  offset: Offset(30.0, 296.0),
                  child:
                    Container(
                      width: 315.0,
                      height: 287.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(37.0),
                        image: DecorationImage(
                          image: const AssetImage('assets/images/right.png'),
                          fit: BoxFit.fill,
                        )
                      ),
                    ),
                ),
              ],
            ),
          ),
        );
      }
    );
  }
}

请注意，这不是完整的代码，因为代码很长。我尝试使用Draggable Scrollable Sheet，当我运行代码时，我只能看到黑屏。有人能帮我吗？在此先感谢：）

Answer 1

在Flutter中滚动内容的最简单方法是使用ListView小部件。尝试这样的事情：

Widget build(BuildContext context) {
return Scaffold(
  body: ListView(
      children: [
        Column(
          children: [
            Container(
              height: 2000,
              child: Text('This container exceeds most screens'),
            ),
            Text('End of container.'),
          ],
        ),
      ],
    ),
  );

Answer 2

您可以使用SingleChildScrollview或Listview进行滚动，让我知道它是否对您有用

  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color(0xffffffff),
        appBar: AppBar(
          title: Text(""),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Stack(
                children: <Widget>[
                  Transform.translate(
                      offset: Offset(30.0, 296.0),
                      child: Container(
                        width: 315.0,
                        height: 287.0,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(37.0),
                            image: DecorationImage(
                               image: const                                                        
                               AssetImage('assets/images/right.png'),
                              fit: BoxFit.fill,
                            )),
                      )),
                ],
              ),
            ],
          ),
        ));
  }

颤抖的可滚动页面

2 个答案: