颤振如何更改图像特定部分的背景和文本? [英] Flutter how to change background and text for a specific section of an image?
问题描述
我正在快速创建一个应用程序，并且需要一些有关如何执行此操作的想法，
I am creating an App in flutter and needed some ideas on how to go about doing this,
我正在将pdf-png图片添加到我的具有阿拉伯文字的应用程序中，并且需要一种更改图片文字的方法.如果图像中包含太多文本，我想转到文本中的特定行，然后向右滑动并更改背景和文本.我应该使用什么小部件?还是我应该怎么做呢?向右滑动，我希望它以漂亮的背景突出显示为英文文本，向左滑动回到阿拉伯语.我正在使用flutter框架，并且坚持执行该操作吗?
I am adding pdf - png images to my app which has arabic text and need a way to change text of an image. If an image has so much text I want to go to a certain line in a text and swipe to the right and change background and text. What widget should I use? Or how should I go about doing this? swipe to the right i want it to highlight to english text with a nice background and swipe to the left back to arabic. This i am using the flutter framework and am stuck on how to go about doing this?
以及如何做到明智的编码...我需要在每行添加尺寸吗?在此处输入代码
and how to do it code wise... will i need to add with dimensions per each line? 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)
)
)
)
)
);
}
}
)
);
}
}
推荐答案
要检测左右滑动，可以使用GestureDetector.
To detect swipe to right and left , you can use GestureDetector .
声明一个布尔值以知道它是向左滑动还是向右滑动.
Declare a boolean to know whether its a left or right swipe.
bool swipeLeft=false;
在脚手架内部或编写此代码的任何地方，将GestureDetector包裹在您的子小部件周围.
and inside your scaffold or wherever you are writing this code, wrap GestureDetector around your child widget.
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并提供用户交互的详细信息.从详细信息中，您可以提取其向右滑动还是向左滑动
Whenever user starts swiping on screen, onPanUpdate is called with details of user interaction. From the details, you can extract whether its right swipe or left swipe
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.
And when swiping ends completely, onPanEnd is called , hence check the status of bool variable, whether it was a swipe left or right and update UI accordingly.
希望这很清楚而且很有帮助！
Hope this is clear and helpful!!
@Edit:与您要具体实现的代码相似的完整代码.尝试遵循类似的方法并实施它.我希望这很清楚！
@ Similar Complete Code related to what you want to implement in particular. Try following a similar approach and implement it. I hope this is clear!
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',
),
),
),
),
],
);
}
}
这篇关于颤振如何更改图像特定部分的背景和文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
