添加的图片:已编辑:2020 年 6 月 23 日以进行澄清... I. 需要这两个按钮根本不移动并保持在同一位置,当我滚动时,这些按钮是静止的,但随着页面滚动,页面的移动会移动按钮,这意味着如果我滚动到第 4 行,它将不再位于第 1 行,第一个按钮在第 4 行,第二个按钮在第 5 行。我根本不希望它们移动......我
基本上,因为我需要让图像执行命令,所以我需要添加一个按钮和代码以便它执行它或者它只是一个 png 图像。
需要在图片中的文本上添加许多按钮...我怎样才能实现这个..?我尝试了不同的策略,但随着滚动的移动,按钮也会移动..
我正在创建一个应用程序,它非常强调背景中的图像,它们是每行图像上的阿拉伯语文本,我想在此文本之上添加“材料按钮”。我能够做到这一点......但后来我使用了单子滚动,我只希望图像滚动而不是按钮。我希望按钮保持在一个特定位置而不滚动,因为逻辑是向右滑动-用户将看到不可见的材料按钮变为活动状态并在向左滑动时显示该特定位置的英文文本用户将看到阿拉伯文本在图像上....
请帮忙
编辑代码以仅显示问题并删除注释代码以仅显示一个堆栈。-
LAYOUT USED:使用单个滚动堆叠和布局图像并将其关闭,然后添加 Raised 按钮,
所需布局:只希望单个子滚动滚动图像而不是图像顶部的凸起按钮。我希望这些按钮是固定的....也许这是一个位置问题,我需要添加不同类型的滚动?
import 'dart:io';
import 'package:Quran_highlighter/main.dart';
import 'package:flutter/rendering.dart';
import 'package:system_shortcuts/system_shortcuts.dart';
import 'package:Quran_highlighter/Widgets/NavDrawer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:zoom_widget/zoom_widget.dart';
import 'package:flutter/gestures.dart';
class Aliflaammeem extends StatefulWidget {
@override
_AliflaammeemState createState() => _AliflaammeemState();
}
class _AliflaammeemState extends State<Aliflaammeem> {
changeTextEnglish() {
setState(() {
bool _visible = true;
_visible = _visible;
textHolder = "All Praise and Thanks is to Allah the lord of the worlds";
});
}
changeTextArabic() {
bool _visible = true;
setState(() {
_visible = _visible;
});
}
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations(
[DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
return Scaffold(
body: Stack(
children: <Widget>[
Center(child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SafeArea(
top: true,
bottom: true,
right: true,
left: true,
child: Image(
image: AssetImage('test/assets/quranpg0.png'),
fit: BoxFit.cover
// ),
// ),
// ),
// ),
// ),
// Container(
// child:Align(
// alignment: Alignment(.00,-.7
// ),
// // color: Colors.red,
// child: FloatingActionButton(
// // color: Colors.red,
// elevation: 9,
// onPressed: () => 0,
// child: Text("Static "))
// ),
// ),
Container(
child: Align(
alignment: Alignment(.00, -.8
),
child: _visible
? MaterialButton(
height: 70.0,
// minWidth: 36.5,
// minWidth: 85.0,
minWidth: 100.0,
onPressed: () => changeTextArabic1(),
onLongPress: () => changeTextEnglish1(),
// child: Text(labels[i]),
child: Text(surah0),
// color: Colors.cyan[400],
color: Colors.purple[300],
highlightColor: Colors.blue,
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
),
textColor: Colors.white,
padding: EdgeInsets.only(left: 80, top: 2, right: 78, bottom: 5),
)
:Container(),
),
),
Container(
child: Align(
alignment: Alignment(.00, -.35
),
child: _visible
? MaterialButton(
height: 70.0,
// minWidth: 36.5,
// minWidth: 85.0,
minWidth: 100.0,
onPressed: () => changeTextArabic1(),
onLongPress: () => changeTextEnglish1(),
// child: Text(labels[i]),
child: Text(label0),
color: Colors.cyan[400],
// color: Colors.purple[300],
highlightColor: Colors.blue,
// shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
// ),
textColor: Colors.white,
padding: EdgeInsets.only(left: -4, top: 2, right: -4, bottom: 5),
)
:Container(),
),
),
Container(
child: Align(
alignment: Alignment(.00, 0.1
),
child: _visible
? MaterialButton(
height: 70.0,
// minWidth: 36.5,
// minWidth: 85.0,
minWidth: 100.0,
onPressed: () => changeTextArabic1(),
onLongPress: () => changeTextEnglish1(),
// child: Text(labels[i]),
child: Text(label1),
color: Colors.cyan[400],
// color: Colors.purple[300],
highlightColor: Colors.blue,
// shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
// ),
textColor: Colors.white,
padding: EdgeInsets.only(left: 20, top: 2, right: 33, bottom: 5),
)
:Container(),
),
),
// for(int i = 0; i< labels.length; i++)
Container(
child: Align(
alignment: Alignment(.00, 0.54
),
child: _visible
?
MaterialButton(
height: 70.0,
minWidth: 100,
onPressed: () => changeTextArabic1(),
onLongPress: () => changeTextEnglish1(),
// Positioned(
// top: 21,
child: Text(label2),
disabledTextColor: Colors.transparent,
color: Colors.cyan[300],
// color: Colors.purple[300],
highlightColor: Colors.blue,
// shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
// ),
textColor: Colors.white,
padding: EdgeInsets.only(left: 90, top: 0, right: 100, bottom: 5),
)
:Container()
),
),
Container(
child: Align(
alignment: Alignment(.00, .99
),
child: _visible
?
MaterialButton(
height: 70.0,
minWidth: 100,
onPressed: () => changeTextArabic1(),
onLongPress: () => changeTextEnglish1(),
// Positioned(
// top: 21,
child: Text(label3),
disabledTextColor: Colors.transparent,
color: Colors.cyan[300],
// color: Colors.purple[300],
highlightColor: Colors.blue,
// shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
// ),
textColor: Colors.white,
padding: EdgeInsets.only(left: 120, top: 2, right: 118, bottom: 5),
)
:Container()
),
),
GestureDetector(onPanUpdate: (DragUpdateDetails details) {
if (details.delta.dx > 0) {
print("right swipe english");
changeTextEnglish1();
setState(() {
});
} else if (details.delta.dx < 0) {
print("left swipe arabic");
changeTextArabic1();
setState(() {
});
}
}
)))))]));}}