0

在此处输入图像描述 添加的图片:已编辑: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(() {
          });
        }
    }
    )))))]));}}
   
4

2 回答 2

0

我认为你必须有很多 Stack。我只是删除了一些并制作了这个工作示例。希望这是你想要的。

class Aliflaammeem extends StatefulWidget {
  @override
  _AliflaammeemState createState() => _AliflaammeemState();
}

class _AliflaammeemState extends State<Aliflaammeem> {
  var nameList = new List<String>();
  final items = List<String>.generate(20, (i) => "Item ${i + 1}");

  List<MaterialButton> buttonsList = new List<MaterialButton>();

  @override
  void initState() {
    super.initState();
    nameList.add("I love");
    nameList.add("my ALLAH");
    nameList.add("SWT Very Much");
  }

  List<String> labels = ['apple', 'banana', 'pineapple', 'kiwi'];
  bool _visible = true;
  int _counter = 0;
  double _initial = 0.0;

  var textHolder = "";

  changeTextEnglish() {
    setState(() {
      _visible = true;
      textHolder = "All Praise and Thanks is to Allah the lord of the worlds";
    });
  }

  changeTextArabic() {
    setState(() {
      _visible = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';
    return Scaffold(
        body: Center(
            child: Stack(fit: StackFit.expand, children: <Widget>[
      SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.red,
              height: 300,
            ),
            Container(
              color: Colors.blue,
              height: 300,
            ),
            Container(
              color: Colors.green,
              height: 300,
            ),
            Container(
              color: Colors.yellow,
              height: 300,
            ),
          ],
        ),
      ),
      Container(
        child: Align(
          alignment: Alignment(.27, 0.1),
          child: _visible
              ? MaterialButton(
                  height: 70.0,
                  minWidth: 85.0,
                  onPressed: () => changeTextArabic(),
                  onLongPress: () => changeTextEnglish(),
                  child: Text('$textHolder'),
                  color: Colors.cyan[400],
                  highlightColor: Colors.blue,
                  textColor: Colors.white,
                  padding: EdgeInsets.only(left: 10, top: 2, right: -1, bottom: 5),
                )
              : Container(),
        ),
      ),
      for (int i = 0; i < labels.length; i++)
        Container(
          child: Align(
            alignment: Alignment(-.5, 0.1),
            child: MaterialButton(
              height: 70.0,
              minWidth: 36.5,
              onPressed: () => changeTextArabic(),
              onLongPress: () => changeTextEnglish(),
              child: Text(labels[i]),
              disabledTextColor: Colors.transparent,
              color: Colors.cyan[300],
              highlightColor: Colors.blue,
              textColor: Colors.white,
              padding: EdgeInsets.only(left: 46, top: 2, right: -20, bottom: 5),
            ),
//  ),
          ),
        ),
      GestureDetector(onPanUpdate: (DragUpdateDetails details) {
        if (details.delta.dx > 0) {
          print("right swipe english");
          changeTextEnglish();
          setState(() {});
        } else if (details.delta.dx < 0) {
          print("left swipe arabic");
          changeTextArabic();
          setState(() {});
        }
      })
    ])));
  }
}
于 2020-06-20T22:47:23.377 回答
0

更新:

经过一番研究,我得出的结论是,您可以使用 floatingActionButton 和 floatingActionButtonLocation 来定位不受滚动影响的 floatingActionButton。您还可以使用对齐中心将其定位在您想要的位置。

我希望这对你有用!

原帖:

我认为最简单和最有效的方法是使用在按钮导航栏中传递的 raiseButton。我见过人们使用 CustomScrollView 但这样做时按钮有点口吃。buttonNavigationBar 似乎是最好的方法。您可以使用颜色和高程与背景融为一体。

如果有任何帮助,请不要忘记将此标记为答案!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final text = "echo\n" * 1000;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Static button"),
        ),
        body: SingleChildScrollView(child: Text(text)),
        bottomNavigationBar: Container(
            color: Colors.white,
            child: RaisedButton(
                color: Colors.white,
                elevation: 0,
                onPressed: () => 0,
                child: Text("Static Button"))),
      ),
    );
  }
}


于 2020-06-20T21:36:14.340 回答