我正在集中精力为应用程序添加可访问性功能。第一个是使用捏合和缩放手势以及按钮来增加/减小文本的大小。我已经在抽屉上完成了此操作，但是在按下按钮时它不会继续增加或减小文本的大小。当前，用户将不得不多次按下按钮。
我已经尝试过onLongPressed，它的作用方式与onTap相同。我也尝试过onTapDown这给我一个错误。
这是我的代码。
class _MapDrawerState extends State<MapDrawer> {
double _fontSize = 16.0;
final double _baseFontSize = 16.0;
double _fontScale = 1.0;
double _baseFontScale = 1.0;
double _maxScale = 2.2;
@override
Widget build(BuildContext context) {
return GestureDetector(
onScaleStart: (ScaleStartDetails scaleStartDetails) {
_baseFontScale = _fontScale;
},
onScaleUpdate: (ScaleUpdateDetails scaleUpdateDetails) {
setState(() {
_fontScale =
(_baseFontScale * scaleUpdateDetails.scale).clamp(1.0, _maxScale);
_fontSize = _fontScale * _baseFontSize;
});
},
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.85, //
child: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Image.asset('assets/imgs/sliding_bar/whiteLogo.png'),
decoration: BoxDecoration(
color: Theme.UniColour.primary[900],
),
margin: EdgeInsets.only(bottom: 0),
),
_buildFontSizeButtons(),
Divider(),
ListTile(
title: Text(
AppLocalizations.of(context).drawerResidences,
style: TextStyle(fontSize: _fontSize),
), // AppLocalizations.of(context).drawerResidences
trailing: Image.asset('assets/imgs/sliding_bar/home2.png'),
onTap: () {
// TODO: Show Student Residences Markers.
//Navigator.pop(context);
},
),
],
),
),
),
);
}
Widget _buildFontSizeButtons() {
return Row(children: <Widget>[
_buildReduceFontSizeIcon(),
_buildIncreaseFontSizeIcon(),
]);
}
Widget _buildReduceFontSizeIcon() {
return Expanded(
child: Opacity(
opacity: 0.60,
child: Container(
padding: EdgeInsets.all(7.0),
decoration: BoxDecoration(
color: Theme.UniColour.secondary[200],
border:
Border.all(color: Theme.UniColour.tertiary[500], width: 1.0),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 1.0,
),
],
),
child: InkWell(
onTap: () {
print("REDUCE FONT-SIZE ICON PRESSED");
setState(() {
if (_fontSize > _baseFontSize) {
_fontSize--;
}
});
},
onLongPress: () {
print("REDUCE FONT-SIZE ICON LONG PRESSED");
setState(() {
if (_fontSize > _baseFontSize) {
_fontSize--;
}
});
},
child: Icon(
Icons.zoom_out,
color: Colors.black87,
size: 36.0,
),
),
),
),
);
}
Widget _buildIncreaseFontSizeIcon() {
return Expanded(
child: Opacity(
opacity: 0.60,
child: Container(
padding: EdgeInsets.all(7.0),
decoration: BoxDecoration(
color: Theme.UniColour.secondary[200],
border:
Border.all(color: Theme.UniColour.tertiary[500], width: 1.0),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 1.0,
),
],
),
child: InkWell(
onTap: () {
print("INCREASE FONT-SIZE ICON PRESSED");
setState(() {
if (_fontSize < _baseFontSize * _maxScale) {
_fontSize++;
}
});
},
onLongPress: () {
print("INCREASE FONT-SIZE ICON LONG PRESSED");
setState(() {
if (_fontSize < _baseFontSize * _maxScale) {
_fontSize++;
}
});
},
child: Icon(
Icons.zoom_in,
color: Colors.black87,
size: 36.0,
),
),
),
),
);
}
}
按下按钮后如何更改文字大小？
如果有人知道如何增加/减小表单字段的大小，那将是惊人的。
任何帮助表示赞赏。
最佳答案
此示例应达到您的期望:
class TextIncreaseIssue extends StatefulWidget {
@override
_TextIncreaseIssueState createState() => _TextIncreaseIssueState();
}
class _TextIncreaseIssueState extends State<TextIncreaseIssue> {
double textFontSize = 12;
Timer _fontTimer;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('My text',
style: TextStyle(fontSize: textFontSize),
),
GestureDetector(
onTapDown: (details) => _tapIncreaseFontSize(),
onLongPressStart: (details) => _startIncreaseFontSize(),
onLongPressEnd: (details) => _stopIncreaseFontSize(),
child: Container(
alignment: Alignment.center,
color: Colors.lightBlue,
height: 60,
width: 100,
child: Text('Increase font'),
),
),
]
),
);
}
void _tapIncreaseFontSize(){
setState(() {
textFontSize++;
});
}
void _startIncreaseFontSize(){
_fontTimer = Timer.periodic(Duration(milliseconds: 100), (timer) {
setState(() {
textFontSize++;
});
});
}
void _stopIncreaseFontSize(){
_fontTimer.cancel();
}
}
关于flutter - 如何在按下按钮的同时增加文本大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60095522/