【问题标题】:Flutter - whitespaces displaying for image in portrait and landscapeFlutter - 纵向和横向图像显示的空白
【发布时间】:2021-02-04 10:06:35
【问题描述】:

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

我的代码有问题吗?

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

  @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: () =>
                    ),
                  ],
                ),
              ]));
            }));
      }
    }

【问题讨论】:

    标签: flutter dart flutter-layout flutter-dependencies singlechildscrollview


    【解决方案1】:

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

    干杯:)

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

    【讨论】:

    • 谢谢 Hamza,我将 true 的安全区域值更改为 false 并且它的工作 :) 用于纵向模式。但是当我在横向模式下执行此操作时,我仍然看到很多空白区域会更新图像
    • 您正在使用SafeArea 尝试删除它。如果它有效,那么我认为防止凹槽和底部导航键是True。试一试:)
    • 您好,我确实尝试删除适用于纵向但不适用于横向的 safeArea .. 还有什么我可以做的吗?
    • 我认为图像可能存在一些尺寸问题。否则这些是我能想到的可能的解决方案:(
    • 兄弟如果你有时间我需要帮助stackoverflow.com/questions/64548263/…
    猜你喜欢
    • 2014-02-07
    • 2020-10-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多