如何滚动到底部工作表中的活动文本字段？答案

【问题标题】：How to scroll to active text field in bottom sheet?如何滚动到底部工作表中的活动文本字段？
【发布时间】：2021-11-28 16:00:49
【问题描述】：

这是我看到的问题演示的自包含代码。

当我点击查看底页时，它正确显示：

但是当我单击文本字段时，它不会向上滚动工作表。

如何获取屏幕以确保字段可见并滚动到活动文本字段？据我所知，它似乎与使用 DefaultTabController 有关。在其他屏幕上，我没有遇到此问题...但仍需要找到针对此特定用例的解决方案。

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({Key? key}) : super(key: key);

  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {

  void showBottom() {
        showModalBottomSheet(
        context: context,
        // isScrollControlled: true,
        builder: (_) {
          return Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Column(
                children: [
                  Text('testing bottom sheet.'),
                  TextFormField(),
                  TextFormField(),
                  TextFormField(),
                ],
              ),
          );
    
        });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('testing'),
             bottom: TabBar(
              indicatorColor: Colors.purple,
              tabs: [
                Tab(
                  child: Text(
                    'Zones',
                    style: TextStyle(color: Colors.black),
                  ),
                ),
                Text('My Profile', style: TextStyle(color: Colors.black))
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Container(
                child: Text('Tab 1'),
              ),
              Container(
                child: Column(
                  children: [
                    Text('This is tab 2'),
                    TextButton(onPressed: (){
                      showBottom();
                    },child: Text('Show bottom'),)
                  ],
                ),
              )
            ],
          ),
        ));
  }
}

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

取消注释行：isScrollControlled: true，这将允许底部工作表占用空间。

【讨论】：