flutter - 使用 Flutter 加载页面后如何强制关注图像？

Question

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

我有一个条款和条件页面，我试图让页面上的第一项（作为徽标）首先关注。相反，当您第一次向右滑动时，第一个焦点会突出显示容器、徽标、段落文本和操作按钮。一旦成为焦点，它就会首先读取段落文本而不是徽标。

我的目标是防止将注意力集中在容器上并直接进入徽标。因此，不要只关注容器中的项目。从那里开始，焦点将转到段落文本，然后是操作按钮。

这是我的代码：

登陆页面.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

标签： flutterdartflutter-iosflutter-android

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