Question

我正在快速创建一个应用，并且需要一些有关如何执行此操作的想法，

我正在将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)
    )
          )
            )
          )
);
}
               }
            )
    );
  }
}

Answer 1

要检测左右滑动，可以使用GestureDetector。

声明一个布尔值以了解其向左或向右滑动。

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。

希望这很清楚而且很有帮助！

@Edit：与您要具体实现的内容相关的类似完整代码。尝试遵循类似的方法并实施它。我希望这很清楚！

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',
              ),
            ),
          ),
        ),
      ],
    );
  }
}

颤抖如何更改图像特定部分的背景和文本？

1 个答案: