代码之家  ›  专栏  ›  技术社区  ›  PeakGen

flatter:`Stack`不显示不在其第一个小部件区域内的内容

  •  0
  • PeakGen  · 技术社区  · 5 年前

    我正在尝试在flatter中创建一个可滚动的UI。我加了一个 ListView Stack .
    下面是我的代码

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    import 'package:flutter/widgets.dart';
    
    var scaffoldKey = GlobalKey<ScaffoldState>();
    
    class TestPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          drawer: Drawer(
            child: ListView(
              // Important: Remove any padding from the ListView.
              padding: EdgeInsets.zero,
              children: <Widget>[
                DrawerHeader(
                  child: Text('Drawer Header'),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                ),
                ListTile(
                  title: Text('Item 1'),
                  onTap: () {
                    // Update the state of the app
                    // ...
                    // Then close the drawer
                    Navigator.pop(context);
                  },
                ),
                ListTile(
                  title: Text('Item 2'),
                  onTap: () {
                    // Update the state of the app
                    // ...
                    // Then close the drawer
                    Navigator.pop(context);
                  },
                ),
              ],
            ),
          ),
          body: Container(
            height: double.infinity,
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[TestPageUI()],
            ),
          ),
          key: scaffoldKey,
        );
      }
    }
    
    class TestPageUI extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return TestPageState();
      }
    }
    
    class TestPageState extends State<TestPageUI> {
      @override
      Widget build(BuildContext context) {
        return Stack(
          children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.height * .30,
              width: double.infinity,
              child: ClipPath(
                clipper: ClippingClass(),
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * .30,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          fit: BoxFit.cover,
                          image: AssetImage("assets/images/morning_image.png"))),
                ),
              ),
            ),
            SafeArea(
              child: Row(
                children: <Widget>[
                  IconButton(
                    icon: Icon(
                      Icons.menu,
                      color: Colors.white,
                    ),
                    onPressed: () {
                      print("clicked");
                      scaffoldKey.currentState.openDrawer();
                    },
                  ),
                  Spacer(
                    flex: 2,
                  ),
                  IconButton(
                    icon: Icon(
                      Icons.notifications,
                      color: Colors.white,
                    ),
                    onPressed: () {},
                  ),
                ],
              ),
            ),
            Positioned(
              top: MediaQuery.of(context).size.height * .2,
              left: 0.0,
              right: 0.0,
              child: Align(
                alignment: Alignment.center,
                child: Container(
                  child: Text(
                    "Good Morning, Fred",
                    style: Theme.of(context)
                        .textTheme
                        .headline
                        .apply(color: Colors.white),
                  ),
                ),
              ),
            ),
            Positioned(
              top: MediaQuery.of(context).size.height * .3,
              left: 0.0,
              right: 0.0,
              child: Container(
                margin: EdgeInsets.only(left: 10, right: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      width: MediaQuery.of(context).size.width * .22,
                      height: 100,
                      child: Column(
                        children: <Widget>[
                          Image.asset(
                            "assets/icons/car_service.png",
                            width: 48,
                            height: 48,
                          ),
                          Container(
                            margin: EdgeInsets.all(5),
                            child: Text(
                              "ONE",
                              style: Theme.of(context)
                                  .textTheme
                                  .caption
                                  .apply(color: Colors.black),
                              textAlign: TextAlign.center,
                            ),
                          )
                        ],
                      ),
                    ),
                    Spacer(
                      flex: 1,
                    ),
                    Container(
                      width: MediaQuery.of(context).size.width * .22,
                      height: 100,
                      child: Column(
                        children: <Widget>[
                          Image.asset(
                            "assets/icons/car_service.png",
                            width: 48,
                            height: 48,
                          ),
                          Container(
                            margin: EdgeInsets.all(5),
                            child: Text(
                              "FOUR",
                              style: Theme.of(context)
                                  .textTheme
                                  .caption
                                  .apply(color: Colors.black),
                              textAlign: TextAlign.center,
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Positioned(
              top: MediaQuery.of(context).size.height * .54,
              left: 0.0,
              right: 0.0,
              child: Container(
                height: MediaQuery.of(context).size.height,
                child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      margin: EdgeInsets.only(bottom: 10, left: 10, right: 10),
                      child: _createAdvertisement(),
                    );
                  },
                ),
              ),
            )
          ],
        );
      }
    
      Widget _createAdvertisement() {
        return Card(
          elevation: 4.0,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
          clipBehavior: Clip.antiAlias,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              FadeInImage.assetNetwork(
                alignment: Alignment.topCenter,
                placeholder: "https://picsum.photos/200",
                image: "https://picsum.photos/200",
                fit: BoxFit.fill,
                width: double.infinity,
                height: MediaQuery.of(context).size.height * .9 / 4,
              ),
              
              
            ],
          ),
        );
      }
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
      }
    }
    
    class ClippingClass extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        var path = Path();
        path.lineTo(0.0, size.height);
        path.quadraticBezierTo(
            size.width / 4, size.height - 30, size.width / 2, size.height - 30);
        path.quadraticBezierTo(size.width - (size.width / 4), size.height - 30,
            size.width, size.height);
        path.lineTo(size.width, 0.0);
        path.close();
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) => false;
    }
    

    有一个问题,下面是输出

    enter image description here

    这里怎么了?如何显示低于30%高度的内容而不出现问题?

    列表视图 在代码的末尾。我不要这个 列表视图 以自己的方式滚动,因为 列表视图 完成滚动整个页面的工作。

    0 回复  |  直到 4 年前
        1
  •  1
  •   beastlyCoder    4 年前

    使用 overflow:Overflow.visible 内部堆栈()

    Stack(overflow: Overflow.visible,
          child:.....)