时间戳

首页 > 解决方案 > Flutter - 纵向和横向图像显示的空白

flutter - Flutter - 纵向和横向图像显示的空白

问题描述

如果我在图像中进行横向或纵向，我会一直看到很多空白区域。我确实需要可滑动的，所以不想过多地调整代码，但我确实希望它看起来可以表示

我的代码有问题吗？

我确实添加了一张在横向和纵向模式下都发生的图片

[1]：https://i.stack.imgur.com/Rx8Gs.jpg

肖像图像

  @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: new Text(
                  "1 Alif-laam-meem آلم, Pg2",
                  style: new TextStyle(color: styling.appBarTextcolor),
                ),
                leading: new IconButton(
                    icon: new Icon(styling.appBarBackArrowIcon),
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => NavDrawer(),
                          ));
                    })),
            body: LayoutBuilder(builder:
                (BuildContext context, BoxConstraints viewportConstraints) {
              return SingleChildScrollView(
                  child: Stack(children: <Widget>[
                new Slidable(
                  delegate: new SlidableDrawerDelegate(),
                  actionExtentRatio: styling.sizeofenglishandforward,
                  child: SafeArea(
                    top: true,
                    bottom: true,
                    right: true,
                    left: true,
                    child: new Container(
                      child: new Image.asset(
                        "test/assets/Para 1 - Alif-laam-meem no color/quranpg2-1.png",
                        // fit: BoxFit.fitidth,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  actions: <Widget>[
                    new IconSlideAction(
                        caption: styling.englishIconText,
                        color: styling.englishIconColorstripe,
                        icon: styling.englishIcon,
                        foregroundColor: styling.englishIconColor,
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => Changepg2topg2Color()),
                          );
                        }),
                    new IconSlideAction(
                      caption: styling.forwardIconText,
                      color: styling.forwardIconColorstripe,
                      icon: styling.forwardIcon,
                      foregroundColor: styling.forwardIconColor,
                      // onTap: () {
                      //   Navigator.push(
                      //     context,
                      //     MaterialPageRoute(builder: (context) => Changepg2topg3()),
                      // );
                      // }
                    ),
                    // ),
                  ],
                  secondaryActions: <Widget>[
                    new IconSlideAction(
                      caption: styling.backIconText,
                      color: styling.backIconColorstripe,
                      icon: styling.backIcon,
                      foregroundColor: styling.backIconColor,
                      // onTap: () => _showSnackBar('More'),
                    ),
                    new IconSlideAction(
                      caption: styling.arabicIconText,
                      color: styling.arabicIconColorstripe,
                      icon: styling.arabicIcon,
                      foregroundColor: styling.arabicIconColor,
                      // onTap: () =>
                    ),
                  ],
                ),
              ]));
            }));
      }
    }

标签： flutterdartflutter-layoutflutter-dependenciessinglechildscrollview

解决方案

SafeArea正在阻止您的图像进入屏幕的某些受限区域，例如凹槽区域下方。或者对于某些设备NavigationKeys，屏幕底部有。尝试删除这些

干杯:)

child: SafeArea(
            top: true,
            bottom: true,
            right: true,
            left: true,

推荐阅读