Как заставить фокус на изображении после загрузки страницы с помощью 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!');
}),
),
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
Следуйте этим инструкциям -> https://flutter.dev/docs/cookbook/forms/focus
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!');
}),
)),
],
)
]),
)));
}
}