如何解决使用 Flutter 加载页面后,如何强制聚焦在图像上?
我似乎找不到关于在页面初始加载时专注于 TextField 以外的任何内容的文档。
我有一个条款和条件页面,我正在尝试使页面上的第一项(即徽标)成为焦点。相反,第一次向右轻扫后,第一个焦点会突出显示徽标、段落文本和操作按钮的容器。一旦它成为焦点,它首先读取段落文本而不是徽标。
我的目标是避免将注意力集中在容器上并直接转到徽标。所以不要只关注容器中的项目。从那里,焦点将转到段落文本,然后是操作按钮。
这是我的代码:
landing_page.dart
import 'package:Flutter/cupertino.dart';
import 'package:Flutter/material.dart';
import 'package:spectrum_access_Flutter/views/widgets/buttons/negative_button.dart';
import 'package:spectrum_access_Flutter/views/widgets/buttons/primary_button.dart';
import 'package:spectrum_access_Flutter/views/widgets/buttons/secondary_button.dart';
class LandingPage extends StatefulWidget {
static const path = 'Terms';
@override
_LandingPageState createState() => _LandingPageState();
}
class _LandingPageState extends State<LandingPage> {
// Define the focus node. To manage the lifecycle,create the FocusNode in
// the initState method,and clean it up in the dispose method.
FocusNode myFocusNode;
bool isVisible = false;
@override
void initState() {
super.initState();
myFocusNode = FocusNode();
}
@override
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Center(
child: new ListView(
shrinkWrap: true,padding: new EdgeInsets.all(25.0),children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),child: Image.network(
''
'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-Flutter-logo.png',semanticLabel: 'Flutter logo',width: 270.0,focusNode: myFocusNode
),),Padding(
padding: const EdgeInsets.fromLTRB(10,30.0,10,30.0),child: Align(
alignment: Alignment.center,child: Container(
child: Text(
'To use Spectrum Access,please agree to the terms of service',textAlign: TextAlign.center,Padding(
padding: const EdgeInsets.only(top: 5.0),child: SecondaryButton(
title: 'Terms and Conditions',semanticLabel: 'Terms and Conditions',onpressed: () {
print('Clicked Terms!');
}),semanticLabel: 'Privacy Policy',onpressed: () {
print('Clicked Privacy!');
}),Padding(
padding: const EdgeInsets.fromLTRB(0,5.0),child: PrimaryButton(
title: 'Agree',onpressed: () async {
print('Clicked Agree!');
}),child: NegativeButton(
title: 'disagree',onpressed: () {
print('Clicked disagree!');
}),],)
]),));
}
}
在第 53 行 focusNode: myFocusnode
给我这个错误:“未定义命名参数‘focusNode’。”
按照这些说明进行操作 --> https://flutter.dev/docs/cookbook/forms/focus
解决方法
我可以使用 IndexedSemantics
完成此操作,并将索引号 -1 放在 ListView 容器上,并设置子项的索引顺序。这解决了我的问题:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:spectrum_access_flutter/views/widgets/buttons/negative_button.dart';
import 'package:spectrum_access_flutter/views/widgets/buttons/primary_button.dart';
import 'package:spectrum_access_flutter/views/widgets/buttons/secondary_button.dart';
class LandingPage extends StatefulWidget {
static const path = 'Terms';
@override
_LandingPageState createState() => _LandingPageState();
}
class _LandingPageState extends State<LandingPage> {
bool isVisible = false;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Center(
child: IndexedSemantics(
index: -1,child: new ListView(
shrinkWrap: true,padding: new EdgeInsets.all(25.0),addSemanticIndexes: false,semanticChildCount: 6,children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),child: IndexedSemantics(
index: 0,child: Semantics(
focused: true,child: Image.network(
''
'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png',semanticLabel: 'Flutter Logo',width: 270.0,)),Padding(
padding: const EdgeInsets.fromLTRB(10,30.0,10,30.0),child: Align(
alignment: Alignment.center,child: Container(
child: Text(
'To use Spectrum Access,please agree to the terms of service',textAlign: TextAlign.center,),Padding(
padding: const EdgeInsets.only(top: 5.0),child: SecondaryButton(
title: 'Terms and Conditions',semanticLabel: 'Terms and Conditions',onPressed: () {
print('Clicked Terms!');
}),semanticLabel: 'Privacy Policy',onPressed: () {
print('Clicked Privacy!');
}),Padding(
padding: const EdgeInsets.fromLTRB(0,5.0),child: PrimaryButton(
title: 'Agree',onPressed: () async {
print('Clicked Agree!');
}),child: NegativeButton(
title: 'Disagree',onPressed: () {
print('Clicked Disagree!');
}),],)
]),)));
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。