如何强制聚焦在图像上，一旦页面加载与颤振?

Question

我似乎找不到关于在初始加载页面时关注TextField以外的任何内容的文档。

我有一个条款和条件页面，我正试图使页面上的第一项(作为标志)首先集中。相反，当您第一次向右滑动时，第一个焦点将突出显示容器的徽标、段落文本和操作按钮。一旦聚焦，它就会首先读取段落文本而不是徽标。

我的目标是防止人们把注意力集中在容器上，而直接转向logo。所以不关注容器，只关注其中的项目。然后，焦点将转到段落文本，然后是动作按钮。

下面是我的代码:

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!');
}),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: SecondaryButton(
title: 'Terms and Conditions',
semanticLabel: 'Privacy Policy',
onPressed: () {
print('Clicked Privacy!');
}),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 30.0, 0, 5.0),
child: PrimaryButton(
title: 'Agree',
onPressed: () async {
print('Clicked Agree!');
}),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 5.0),
child: NegativeButton(
title: 'Disagree',
onPressed: () {
print('Clicked Disagree!');
}),
),
],
)
]),
));
}
}

在第53行focusNode: myFocusnode给我这个错误:"命名参数'focusNode'没有定义。">

遵循这些指示——>https://flutter.dev/docs/cookbook/forms/focus

Answer 1

我能够用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: IndexedSemantics(
index: 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: IndexedSemantics(
index: 0,
child: SecondaryButton(
title: 'Terms and Conditions',
semanticLabel: 'Terms and Conditions',
onPressed: () {
print('Clicked Terms!');
}),
)),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: IndexedSemantics(
index: 0,
child: SecondaryButton(
title: 'Terms and Conditions',
semanticLabel: 'Privacy Policy',
onPressed: () {
print('Clicked Privacy!');
}),
)),
Padding(
padding: const EdgeInsets.fromLTRB(0, 30.0, 0, 5.0),
child: IndexedSemantics(
index: 0,
child: PrimaryButton(
title: 'Agree',
onPressed: () async {
print('Clicked Agree!');
}),
)),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 5.0),
child: IndexedSemantics(
index: 0,
child: NegativeButton(
title: 'Disagree',
onPressed: () {
print('Clicked Disagree!');
}),
)),
],
)
]),
)));
}
}