我正在快速创建一个应用,并且需要一些有关如何执行此操作的想法,
我正在将pdf-png图片添加到我的应用中,该应用具有阿拉伯文字,需要一种更改图片文字的方法。如果图像中包含太多文本,我想转到文本中的某一行并向右滑动并更改背景和文本。我应该使用什么小部件?还是我应该怎么做呢?向右滑动,我希望它以漂亮的背景突出显示为英文文本,向左滑动回到阿拉伯语。我正在使用flutter框架,并且坚持执行该操作吗?
以及如何在代码上做到明智...我需要在每行添加尺寸吗?enter code here
import 'dart:io';
'import 'package:Quran_highlighter/main.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';
// onPanEnd: (details) {
// if (swipeLeft) {
// handleSwipeLeft();
// } else
// handleSwipeRight();
// },
// onPanUpdate: (details) {
// if (details.delta.dx > 0) {
// swipeLeft = false;
// } else {
// //print("Dragging in -X direction");
// swipeLeft = true;
// }
// },
Future main() async {
await SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight
]);
runApp(new Aliflaammeem());
}
class Aliflaammeem extends StatefulWidget{
@override
_AliflaammeemState createState() => _AliflaammeemState();
}
class _AliflaammeemState extends State<Aliflaammeem>{
// Widget body(BuildContext context) {
// if(MediaQuery.of(context).orientation == Orientation.portrait)
// {
// return portrait();
// }
// else {
// return landscape();
// }
// }
// landscapeLeft
// landscapeRight
// portraitDown
// portraitUp
double value;
@override
void initState(){
value = 0.0;
super.initState();
}
@override
Widget build(BuildContext context) {
// appBar: AppBar(
// title: Text('Para 1, Pg2'),
// backgroundColor: Colors.teal[400],
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight
]);
return Scaffold(
body: GestureDetector(
onPanUpdate: (DragUpdateDetails details){
if (details.delta.dx>0){
print("right swipe english");
setState(() {
// highlightColor: Colors.green,
// textColor: Colors.white,
new Text("In The Name of Allah, the Benificient, The Mericiful",
style: new TextStyle(fontSize: 12.0),
);
// // fontWeight: FontWeight.w200,
// fontFamily: "Roboto"),
// value = 2.1;
});
} else if (details.delta.dx<0){
print("left swipe arabic");
setState(() {
// highlightColor: Colors.green,
// textColor: Colors.white,
new Text("In The Name of Allah,The Mericiful",
style: new TextStyle(fontSize: 12.0),
);
// value= 0.1;
});
new Container(
child: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
// scrollDirection: Axis.horizontal,
// child: Zoom(
// height:1800,
// width: 1800,
child: SafeArea(
top: true,
bottom: true,
right: true,
left: true,
child:Image(image: AssetImage('test/assets/quranpg0.png'),
fit: BoxFit.cover)
)
)
)
)
);
}
}
)
);
}
}
声明一个布尔值以知道它是向左还是向右滑动。
bool swipeLeft=false;
并且在您的脚手架内部或编写此代码的任何地方,将GestureDetector包裹在您的子小部件周围。
child: GestureDetector( onPanEnd: (details) { if (swipeLeft) { handleSwipeLeft(); } else handleSwipeRight(); }, onPanUpdate: (details) { if (details.delta.dx > 0) { swipeLeft = false; } else { //print("Dragging in -X direction"); swipeLeft = true; } }, child: Container( child: PDFPngImage(), ) ),
[只要用户开始在屏幕上滑动,就会调用onPanUpdate并提供用户交互的详细信息。从详细信息中,您可以提取其向右滑动还是向左滑动
onPanUpdate: (details) { if (details.delta.dx > 0) { //it means , user is swiping towards right //hence set bool variable to false. swipeLeft = false; } }
并且当滑动完全结束时,将调用onPanEnd,因此请检查bool变量的状态,是否是向左或向右滑动,并相应地更新UI。
希望这很清楚而且很有帮助!@@编辑:与您要具体实现的代码相似的完整代码。尝试遵循类似的方法并实施它。我希望这很清楚!
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class TestPage extends StatefulWidget { @override _TestPageState createState() => _TestPageState(); } class _TestPageState extends State<TestPage> { var myText = ""; var image; var pageIndex = 0; var numberOfOnBoardScreens = 3; var swipeLeft = false; var data = [ [ 'assets/images/urdu.png', 'Text in urdu', ], [ 'assets/images/English.png', 'English translation', ], [ 'assets/images/french.png', 'Translation in french', ] ]; handleClick(direction) { print('handle click :$direction'); if (direction == -1) //moving left { if (pageIndex > 0) { setState(() { pageIndex -= 1; }); } } else if (numberOfOnBoardScreens - 1 > pageIndex) { setState(() { pageIndex += 1; }); } } @override Widget build(BuildContext context) { return new Scaffold( body: GestureDetector( //onHorizontalDragEnd: handleClick(1), onPanEnd: (details) { if (swipeLeft) { handleClick(1); } else handleClick(-1); }, onPanUpdate: (details) { if (details.delta.dx > 0) { swipeLeft = false; } else { //print("Dragging in -X direction"); swipeLeft = true; } }, child: TestPageScreenWidgetState( image: data[pageIndex][0], myText: data[pageIndex][1], )), ); } } class TestPageScreenWidgetState extends StatelessWidget { final myText; var image; var currentScreen = 1; TestPageScreenWidgetState({ this.image, this.myText, }); @override Widget build(BuildContext context) { // TODO: implement build return Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.max, children: <Widget>[ SizedBox( height: MediaQuery.of(context).viewPadding.top, ), Image.asset( image, ), Center( child: Padding( padding: const EdgeInsets.fromLTRB(100, 10, 90, 60), child: Center( child: Text( '$myText', ), ), ), ), ], ); } }