浮動AppBar中的textField焦點回滾問題解決

Posted on by

完整問題描述

SliverAppBar的floating=true,pinned=false模式中嵌套的TextField，會在獲取焦點時觸發CustomScrollView滾動到頂部。

問題表現

CustomScrollView和SliverAppBar的介紹和演示，參見官方文檔。

在floating=true和pinned=false 這兩個組合參數的模式下，SliverAppBar表現為：列表向上滑動時隨列表向上滑動直至消失。

列表在任何位置向下滑動時，會立即從上方滑入直至全部展現。

如果該組件內嵌套瞭TextField，在列表上滑一段距離，再下滑至SliverAppBar及其內嵌套的TextField出現時(此時列表尚未滑動到頂端)，點擊TextField使其獲取焦點以輸入文字，此時列表會立即滾動至頂。

如圖：

初步探索

開始調試問題，嘗試瞭各種參數組合，隻要pinned為true就沒有這個問題，因為SliverAppBar總會展現在最頂端。然後想到瞭在獲取焦點的同時，將CustomScrollView的physics設置為 NeverScrollableScrollPhysics(意為禁止滾動)，此時並不影響CustomScrollView的滾動位置，然後在輸入完成或失去焦點時，再取消禁止滾動的狀態，即可避免獲取焦點時列表滾動至頂端的問題。解決代碼如下：

class CustomScrollTextFieldPage extends StatefulWidget {
  const CustomScrollTextFieldPage({Key? key}) : super(key: key);
  @override
  State<CustomScrollTextFieldPage> createState() =>
      _CustomScrollTextFieldPageState();
}
class _CustomScrollTextFieldPageState extends State<CustomScrollTextFieldPage> {
  final textController = TextEditingController();
  final editableTextController = TextEditingController();
  bool focused = false;
  final focusNode = FocusNode();
  final buttonFocus = FocusNode();
  final textFocus = FocusNode();
  @override
  void initState() {
    super.initState();
    focusNode.addListener(_onFocus);
  }
  @override
  void dispose() {
    focusNode.removeListener(_onFocus);
    super.dispose();
  }
  _onFocus() {
    setState(() {
      focused = focusNode.hasFocus;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTapDown: () {
          FocusManager.instance.rootScope.requestFocus(FocusNode());
        },
        child: CustomScrollView(
          physics: focused ? const NeverScrollableScrollPhysics() : null,
          slivers: <Widget>[
            SliverAppBar(
              floating: true,
              pinned: false,
              expandedHeight: 250.0,
              flexibleSpace: FlexibleSpaceBar(
                expandedTitleScale: 1,
                title: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                      child: TextField(
                        focusNode: focusNode,
                        controller: textController,
                        onEditingComplete: () {
                          FocusManager.instance.rootScope.requestFocus(FocusNode());
                        },
                        style: const TextStyle(color: Colors.white),
                        decoration: const InputDecoration(
                          border: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white),
                          ),
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16),
                      child: IconButton(
                        visualDensity:
                            VisualDensity(horizontal: 0, vertical: -4),
                        padding: EdgeInsets.zero,
                        onPressed: () {
                          print('btn clicked');
                          buttonFocus.requestFocus();
                        },
                        focusNode: buttonFocus,
                        icon: Icon(Icons.heart_broken),
                      ),
                    )
                  ],
                ),
              ),
            ),
            SliverGrid(
              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200.0,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.teal[100 * (index % 9)],
                    child: Text('Grid Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 50.0,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: Text('List Item $index'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

這個解決方法有點不完美的表現，就是輸入完成時不點擊頁面，而是直接點擊收起鍵盤，這時不會觸發onTapDown也不會觸發 onEditingComplete ，就需要在屏幕再點擊或者滑動時才能重置列表的可滾動狀態。

更好的解決辦法

經過進一步測試，發現在輸入框內的EditableText中對focus進行瞭監聽，在獲取焦點時遞歸調用瞭RenderObject的showOnScreen方法，會一直向上追溯Render樹，最終調用到RenderSliverList中，觸發瞭滾動事件。

是不是可以在TextField外包裹一個自定義瞭RenderBox的組件，把這個showOnScreen調用給切斷呢？於是翻瞭下官方的幾個組件寫法，照貓畫虎寫瞭個自定義的組件

class IgnoreShowOnScreenWidget extends SingleChildRenderObjectWidget {
  const IgnoreShowOnScreenWidget({
    Key? key,
    Widget? child,
    this.ignoreShowOnScreen = true,
  }) : super(key: key, child: child);
  final bool ignoreShowOnScreen;
  @override
  RenderObject createRenderObject(BuildContext context) {
    return IgnoreShowOnScreenRenderObject(
      ignoreShowOnScreen: ignoreShowOnScreen,
    );
  }
}
class IgnoreShowOnScreenRenderObject extends RenderProxyBox {
  IgnoreShowOnScreenRenderObject({
    RenderBox? child,
    this.ignoreShowOnScreen = true,
  });
  final bool ignoreShowOnScreen;
  @override
  void showOnScreen({
    RenderObject? descendant,
    Rect? rect,
    Duration duration = Duration.zero,
    Curve curve = Curves.ease,
  }) {
    if (!ignoreShowOnScreen) {
      return super.showOnScreen(
        descendant: descendant,
        rect: rect,
        duration: duration,
        curve: curve,
      );
    }
  }
}

使用方法

class CustomScrollTextFieldPage extends StatefulWidget {
  const CustomScrollTextFieldPage({Key? key}) : super(key: key);
  @override
  State<CustomScrollTextFieldPage> createState() =>
      _CustomScrollTextFieldPageState();
}
class _CustomScrollTextFieldPageState extends State<CustomScrollTextFieldPage> {
  final textController = TextEditingController();
  final focusNode = FocusNode();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          FocusManager.instance.rootScope.requestFocus(FocusNode());
        },
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              floating: true,
              pinned: false,
              expandedHeight: 250.0,
              flexibleSpace: FlexibleSpaceBar(
                expandedTitleScale: 1,
                title: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                      child: IgnoreShowOnScreenWidget(
                        child: TextField(
                          focusNode: focusNode ,
                          controller: textController ,
                          style: const TextStyle(color: Colors.white),
                          decoration: const InputDecoration(
                            border: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.white),
                            ),
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16),
                      child: IconButton(
                        visualDensity:
                            VisualDensity(horizontal: 0, vertical: -4),
                        padding: EdgeInsets.zero,
                        onPressed: () {
                          print('btn clicked');
                        },
                        icon: Icon(Icons.heart_broken),
                      ),
                    )
                  ],
                ),
              ),
            ),
            SliverGrid(
              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200.0,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.teal[100 * (index % 9)],
                    child: Text('Grid Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 50.0,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: Text('List Item $index'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

初步嘗試，確實可以更方便地解決問題。

效果如圖：

目前還未發現有什麼副作用，如果哪位大神有更好的解決辦法，

以上就是浮動AppBar中的textField焦點回滾問題解決的詳細內容，更多關於AppBar浮動textField焦點回滾的資料請關註WalkonNet其它相關文章！

推薦閱讀：