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

Posted 2023-02-23

【中文标题】Flutter - 纵向和横向图像显示的空白

【英文标题】：Flutter - whitespaces displaying for image in portrait and landscape

【发布时间】：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: () =>
                    ),
                  ],
                ),
              ]));
            ));
      
    

【参考方案1】：

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

干杯:)

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

【讨论】：

谢谢 Hamza，我将 true 的安全区域值更改为 false 并且它的工作 :) 用于纵向模式。但是当我在横向模式下执行此操作时，我仍然看到很多空白区域会更新图像

您正在使用SafeArea 尝试删除它。如果它有效，那么我认为防止凹槽和底部导航键是True。试一试:)

您好，我确实尝试删除适用于纵向但不适用于横向的 safeArea .. 还有什么我可以做的吗？

我认为图像可能存在一些尺寸问题。否则这些是我能想到的可能的解决方案:(

兄弟如果你有时间我需要帮助***.com/questions/64548263/…