在Stack＆gt;下包装时颤动的键盘问题不透明度>滚动

Question

在flutter应用程序中，当输入字段包含在Scrollable，Opacity，Stack中时，当键盘出现时，可滚动视图未正确放置。

键盘出现时如何正确制作可滚动视图？

如果输入字段未包含在Scrollable中，则根本不显示键盘。可以通过在以下代码中使用Column更改ListView来进行测试。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class SecurePage extends StatelessWidget {
  final int index;

  SecurePage(this.index);

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Secure'),
      ),
      body: new Column(
        children: <Widget>[
          new Text('No $index'),
          new IconButton(
            icon: new Icon(Icons.verified_user),
            onPressed: () {
              Navigator.of(context).push(
                new MaterialPageRoute(
                  builder: (BuildContext context) {
                    return new VerifiedPage(index + 1);
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

class VerifiedPage extends StatelessWidget {
  final int index;

  VerifiedPage(this.index);

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Verity'),
      ),
      body: new ListView(
        children: <Widget>[
          new Text('No $index'),
          new Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: new TextField(
              autofocus: index % 2 == 1,
              decoration: const InputDecoration(
                hintText: 'Search',
              ),
            ),
          ),
          new IconButton(
            icon: new Icon(Icons.security),
            onPressed: () {
              Navigator.of(context).push(
                new MaterialPageRoute(
                  builder: (BuildContext context) {
                    return new SecurePage(index + 1);
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  List<Widget> initialWidgets = <Widget>[
    new SecurePage(0),
    new VerifiedPage(0),
  ];

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: new List<Widget>.generate(initialWidgets.length, (int index) {
          return new IgnorePointer(
            ignoring: index != _page,
            child: new Opacity(
              opacity: _page == index ? 1.0 : 0.0,
              child: new Navigator(
                onGenerateRoute: (RouteSettings settings) {
                  return new MaterialPageRoute(
                    builder: (_) => initialWidgets[index],
                  );
                },
              ),
            ),
          );
        }),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _page,
        onTap: (int index) {
          setState(() {
            _page = index;
          });
        },
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            icon: new Icon(Icons.security),
            title: new Text('Secure'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.verified_user),
            title: new Text('Verified'),
          ),
        ],
      ),
    );
  }
}

Answer 1

问题在于您在Scaffold内嵌套了Scaffold，并且每个脚手架都在尝试为键盘添加填充。您应该一次只使用一个Scaffold。不要使用内部Scaffold，而应考虑使用Column将AppBar置于屏幕顶部。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class SecurePage extends StatelessWidget {
  final int index;

  SecurePage(this.index);

  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new AppBar(
          title: new Text('Secure'),
        ),
        new Text('No $index'),
        new IconButton(
          icon: new Icon(Icons.verified_user),
          onPressed: () {
            Navigator.of(context).push(
              new MaterialPageRoute(
                builder: (BuildContext context) {
                  return new VerifiedPage(index + 1);
                },
              ),
            );
          },
        ),
      ],
    );
  }
}

class VerifiedPage extends StatelessWidget {
  final int index;

  VerifiedPage(this.index);

  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new AppBar(
          title: new Text('Verity'),
        ),
        new Text('No $index'),
        new Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: new TextField(
            autofocus: index % 2 == 1,
            decoration: const InputDecoration(
              hintText: 'Search',
            ),
          ),
        ),
        new IconButton(
          icon: new Icon(Icons.security),
          onPressed: () {
            Navigator.of(context).push(
              new MaterialPageRoute(
                builder: (BuildContext context) {
                  return new SecurePage(index + 1);
                },
              ),
            );
          },
        ),
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  List<Widget> initialWidgets = <Widget>[
    new SecurePage(0),
    new VerifiedPage(0),
  ];

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: new List<Widget>.generate(initialWidgets.length, (int index) {
          return new IgnorePointer(
            ignoring: index != _page,
            child: new Opacity(
              opacity: _page == index ? 1.0 : 0.0,
              child: new Navigator(
                onGenerateRoute: (RouteSettings settings) {
                  return new MaterialPageRoute(
                    builder: (_) => initialWidgets[index],
                  );
                },
              ),
            ),
          );
        }),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _page,
        onTap: (int index) {
          setState(() {
            _page = index;
          });
        },
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            icon: new Icon(Icons.security),
            title: new Text('Secure'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.verified_user),
            title: new Text('Verified'),
          ),
        ],
      ),
    );
  }
}