使用 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!');
                          }),],)
          ]),)));
  }
}