Flutter

Question

添加图片：编辑：2020 年 6 月 23 日为了澄清......我需要这两个按钮根本不移动并保持在相同的位置，当我滚动时这些按钮是静止的但随着页面滚动页面的移动移动按钮所以这意味着它不会如果我滚动到第 4 行，第一个按钮在第 4 行，第二个按钮在第 5 行，则不再在第 1 行。我根本不希望它们移动...我

基本上，因为我需要让图像执行命令，所以我需要添加一个按钮和代码才能执行此操作，或者它只是一个 png 图像。

需要在图片中的文字上添加很多按钮...我该如何实现...？我尝试了不同的策略，但是当滚动条移动时，按钮也会移动..

我正在创建一个非常强调背景图像的应用程序，它们是每行图像上的阿拉伯文文本，我想在顶部添加“material 按钮”这段文字。我能够做到这一点......但后来我使用了单个子滚动条，我只希望图像滚动而不是按钮。我希望按钮保持在一个特定位置而不滚动，因为逻辑是向右滑动——用户将看到不可见的 material 按钮变为活动状态，并在向左滑动时显示该特定位置的英文文本，用户将看到图片上的阿拉伯文字....

请帮忙

编辑代码以仅显示问题并删除注释代码以仅显示一个堆栈。 -

使用的布局：使用单个滚动条堆叠和布局图像并将其关闭然后添加了 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(() {
          });
        }
    }
    )))))]));}}

Answer 1

更新：

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

希望这对你有用！

原文post：

我认为最简单和最有效的方法是使用在 buttomNavigationBar 中传递的 raisedButton。我见过有人使用 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"))),
      ),
    );
  }
}

Answer 2

我想你有很多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(() {});
        }
      })
    ])));
  }
}

Flutter - 如何在滚动页面时制作 Material 按钮文具

Flutter - How to make a Material Button stationery while scrolling page

arabic

flutter-layout

singlechildscrollview

materialbutton

更新：

原文post：