flutter - Flutter - 如何在滚动页面时制作材质按钮文具
问题描述
添加的图片:已编辑: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(() {
});
}
}
)))))]));}}
解决方案
我认为你必须有很多 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(() {});
}
})
])));
}
}
推荐阅读
- angular - 根据需要销毁 Angular 组件
- spring - JpaRepository findByFieldEquals 忽略大小写
- python - 来自两列的滚动事件
- react-native - Appium 用于 React Native 应用程序的 accessibilityLabel 的替代方案
- excel - 在自动过滤器中使用特殊字符
- r - 在 summarise_if() 中使用其他列作为函数的参数
- reactjs - 传递错误类型的道具时,Typescript 不会抛出错误
- laravel - laravel 7文章参数未在文章视图中传递标题
- java - MVVM 数据绑定验证
- sql - 你能在 SQL Server 的 select 语句中做一个正则表达式吗?