Flutter- 根据我的代码如何使 material 按钮在向左滑动时不可见并在向右滑动时重新出现

Question

我正在创建一个非常强调背景图像的应用程序，它们是每行图像上的阿拉伯文文本，我想在顶部添加“material 按钮”这段文字。我能够做到这一点......但是我希望按钮在我向左滑动后不可见，并在我向右滑动时重新出现，我确实使用了手势检测器并且如果我向右滑动它会在屏幕上打印或向左滑动 ..我试图在 material 按钮中输入手势检测器，但每次我尝试这样做时它都会发送错误，这就是为什么我在整个代码的底部有手势检测器的原因请帮助 ...

请帮忙

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> {
  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<Widget> buildButtonswithName(){
  int length = nameList.length;
  for (int i=0; i<length; i++){
    buttonsList.add(new MaterialButton(
      height:40.0,
      minWidth: 300.0,
      color: Colors.blue,
      textColor: Colors.white,

  ));
  }
}  }

List<String> labels = ['apple', 'banana', 'pineapple', 'kiwi'];
// List<VoidCallback> actions = [_buyApple, _doSomething, _downloadData, () => print('Hi')
// ];
   bool _visible = true;
  int _counter = 0;
  double _initial = 0.0;

  var textHolder = "";

  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) {
    final title = 'Dismissing Items';
    // appBar: AppBar(
    //   title: Text('Para 1, Pg2'),
    //   backgroundColor: Colors.teal[400],

    // SystemChrome.setPreferredOrientations(
    //     [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
    return Scaffold(
        body: Center(
            child: Stack(fit: StackFit.expand, children: <Widget>[
      Stack(
        children: <Widget>[
          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
              ),   
            ),
          ),
        ],
          ),
        
  

      Stack(
        children: <Widget>[
        // for(int i = 0; i< labels.length; i++)
        // weather_app/lib/page/settings_page.dart -- line ~81
    // ListView.builder(
    //       itemCount: items.length,
    //       itemBuilder: (context, index) {
    //         final item = items[index];

    //         return Dismissible(
    //           // Each Dismissible must contain a Key. Keys allow Flutter to
    //           // uniquely identify widgets.
    //           key: Key(item),
    //           // Provide a function that tells the app
    //           // what to do after an item has been swiped away.
    //           onDismissed: (direction) {
    //             // Remove the item from the data source.
    //             setState(() {
    //               items.removeAt(index);
    //             });
    //         // Then show a snackbar.
    //             Scaffold.of(context)
    //                 .showSnackBar(SnackBar(content: Text("$item dismissed")));
    //           },
    //           // Show a red background as the item is swiped away.
    //           background: Container(color: Colors.green),
    //           secondaryBackground: Container(color: Colors.red),
    //           child: ListTile(title: Text('$item'))
        
         
    //         );
    //           },
    //         ),

        Container(
          child: Align(
            alignment: Alignment(.27, 0.1
            ),
          //   child: Visibility(
          // visible: _visible,
          // maintainSize: true,
          // maintainAnimation: true,
          // maintainState: true,
              child: MaterialButton(
              height: 70.0,
              // minWidth: 36.5,
              minWidth: 85.0,
              onPressed: () => changeTextArabic(),
              onLongPress: () => changeTextEnglish(),
              // child: Text(labels[i]),
              child: Text('$textHolder'),
              color: Colors.cyan[400],
              // color: Colors.purple[300],
              highlightColor: Colors.blue,
              textColor: Colors.white,
              padding: EdgeInsets.only(left: 10, top: 2, right: -1, bottom: 5
              ),
              ),
            ),
            ),
            for(int i = 0; i< labels.length; i++)
               Container(
          child: Align(
            alignment: Alignment(-.5, 0.1
            ),
//  child: Text("The Most Loving",
//  style: TextStyle(
//    fontSize: 15.0,
//    backgroundColor: Colors.cyan,
//    height: 1.0,
//    fontWeight: FontWeight.bold
//    ),
            child: MaterialButton(
              height: 70.0,
              minWidth: 36.5,
              onPressed: () => changeTextArabic(),
              onLongPress: () => changeTextEnglish(),
              // Positioned(
              // top: 21,
              child: Text(labels[i]),
              disabledTextColor: Colors.transparent,
              color: Colors.cyan[300],
              // color: Colors.purple[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(() {
          });
        }
      })
    ])));
  }
}

Answer 1

我想我得到了你想要的。

首先我添加了一个显示 MaterialButton 的条件，如下所示：

(_visible) ? MaterialButton(...) : Container()

然后在“changeTextEnglish”和“changeTextArabic”中：

我把_visible改成了绝对值
我删除了你的行“bool _visible = ...”，因为在这里你在函数内部创建局部变量，因此无法再访问 _visible 作为 _AliflaammeemState 的属性。

所以“changeTextEnglish”和“changeTextArabic”变成了：

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

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

我找到了以下工作代码（我删除了您的评论以便能够看到问题，所以也许不要复制粘贴整个代码。

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>[
      Stack(
        children: <Widget>[
          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),
            ),
          ),
        ],
      ),
      Stack(
        children: <Widget>[
          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- per my code how to make material button invisible on swiping left and re-appear on swiping right

swipe

gesturedetector

flutter

flutter-layout

materialbutton