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

标签 flutter dart flutter-layout flutter-dependencies singlechildscrollview

如果我在图像中做横向或纵向,我会一直看到很多空白。我确实需要可滑动,所以不想过多地调整代码,但我确实希望它看起来可表示
我的代码有问题吗?
我确实添加了一张在横向和纵向模式下都发生的图片
[1]: /image/Rx8Gs.jpg
portrait image

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

最佳答案

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

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

关于Flutter - 以纵向和横向显示图像的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64464468/

相关文章:

sqlite - 在 SQLite (Flutter) 中更新字段

flutter - 闪屏颜色在 flutter 中没有改变

flutter - 如何在 Flutter 的屏幕顶部创建一个半椭圆?

dart - ShapeBorder Clipper 类和 CustomClipper<T> 类有什么区别

dart - 事件选项卡未使用 BottomNavigationBar 保持突出显示(打开然后关闭)

android - 使用自定义画家在自定义 slider 中添加 SVG 图标

android-studio - Android Studio 中的 flutter : Build Bundle/APK greyed out

flutter - Navigation.of(context) 不去另一条路线

flutter - 如何在flutter中的下拉列表中显示Json数据

json - 如何从 JSON API 调用项目并添加到 TabBar - Flutter