0

我正在尝试制作一个在两个选项卡视图（第二个和第一个）内都有一个文本字段的底页。但是，底页与键盘重叠。

我尝试了这里提到的所有解决方案： 如何将底页与具有文本字段的键盘一起移动（自动对焦为真）？

它有效，但仅适用于选项卡（容器内的脚手架内的选项卡）而不显示 tabview 内容，我的意思是 tabview 消失并仅显示白屏！

这里是键盘出现之前和之后的屏幕图像：

前 ： 在此处输入图像描述

后 ： 在此处输入图像描述

编码 ：

showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    isScrollControlled: true,
    builder: (context) {
    return Padding(
    padding: MediaQuery.of(context).viewInsets,
    child: StatefulBuilder(builder:
    (BuildContext context, StateSetter setState) {
    return Container(
        width: MediaQuery.of(context).size.width,
        height: 282,
        decoration: BoxDecoration(
            // color: colorPrimary,
            color: Colors.black,
            borderRadius: BorderRadius.only(
            topLeft: Radius.circular(18.0),
            topRight: const Radius.circular(18.0),
            ),
        ),
child: DefaultTabController(
    length: 2,
    child: Padding(
    padding: const EdgeInsets.symmetric(
        vertical: 10, horizontal: 12),
    child: Scaffold(
        resizeToAvoidBottomInset: true,
appBar: TabBar(
    tabs: [
    Tab(
        icon: Icon(
        Icons.directions_car,
        color: Colors.black,
    )),
    Tab(
        icon: Icon(
        Icons.directions_transit,
        color: Colors.black,
    )),
    ],
),
body: TabBarView(
    controller: _controller,
    children: <Widget>[
    Column(
        children: <Widget>[
        Text(
            'the first tab view',
            style: TextStyle(fontSize: 24),
        ),
        SizedBox(height: 26),
        Container(
            height: 73,
            width: MediaQuery.of(context).size.width -24,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: colorPrimary,
                border: Border.all(width: 0.5,
                    color: Colors.redAccent)),
            child: Align(
                alignment:Alignment.center,
                child: TextField(
                maxLength: 30,
                enableInteractiveSelection:false,
                keyboardType: TextInputType.number,
                style: TextStyle(height: 1.6),
                cursorColor: Colors.green[800],
                textAlign: TextAlign.center,
                autofocus: false,
                decoration:
                    InputDecoration(
                    border:InputBorder.none,
                    hintText:'Internet',
                    counterText: "",
                ),
                ),
            )),
        ],
    ),
    Column(
        children: <Widget>[
        Text(
            'the second tab view',
            style: TextStyle(fontSize: 24),
        ),
        SizedBox(height: 26),
        Container(
            height: 73,
            width: MediaQuery.of(context).size.width -24,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: colorPrimary,
                border: Border.all(width: 0.5,
                    color: Colors.redAccent)),
            child: Align(
                alignment:Alignment.center,
                child: TextField(
                maxLength: 30,
                enableInteractiveSelection:false,
                keyboardType: TextInputType.number,
                style: TextStyle(height: 1.6),
                cursorColor: Colors.green[800],
                textAlign: TextAlign.center,
                autofocus: false,
                decoration:
                    InputDecoration(
                    border:InputBorder.none,
                    hintText:'Credit',
                    counterText: "",
                ),
                ),
            )),
        ],
    )
],
)),
 ),));}),);});

所以 ！有人曾经遇到过这个问题或有任何想法可以提供帮助吗？！谢谢。

4

2 回答 2

1

您可以像这样包装您的 modalBottomSheet 孩子Scaffold：

showModalBottomSheet(
        builder: (context){
            return Scaffold(
                backgroundColor: Colors.transparent,
                resizeToAvoidBottomInset: true,
                body: //your child
于 2020-10-01T15:51:13.973 回答
1

您可以在第 1 步下面复制粘贴运行完整代码
：您可以使用SingleChildScrollView

builder: (context) {
        return SingleChildScrollView(
          child: Padding(

第 2 步：删除Scaffold appbar body并替换为Column

 child: Column(
      mainAxisAlignment:
          MainAxisAlignment.center,
      crossAxisAlignment:
          CrossAxisAlignment.start,
      children: <Widget>[
        TabBar(
        ...
         Expanded(
          child: TabBarView(

工作演示

在此处输入图像描述

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int _counter = 0;
  Color colorPrimary = Colors.blue;
  TabController _controller;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void initState() {
    super.initState();
    // 添加监听器
    _controller = TabController(vsync: this, length: 2);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                child: const Text('showModalBottomSheet'),
                onPressed: () {
                  showModalBottomSheet(
                      backgroundColor: Colors.transparent,
                      context: context,
                      isScrollControlled: true,
                      builder: (context) {
                        return SingleChildScrollView(
                          child: Padding(
                            padding: MediaQuery.of(context).viewInsets,
                            child: StatefulBuilder(builder:
                                (BuildContext context, StateSetter setState) {
                              return Container(
                                  width: MediaQuery.of(context).size.width,
                                  height: 282,
                                  decoration: BoxDecoration(
                                    // color: colorPrimary,
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(18.0),
                                      topRight: const Radius.circular(18.0),
                                    ),
                                  ),
                                  child: DefaultTabController(
                                    length: 2,
                                    child: Padding(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 10, horizontal: 12),
                                      child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            TabBar(
                                              tabs: [
                                                Tab(
                                                    icon: Icon(
                                                  Icons.directions_car,
                                                  color: Colors.black,
                                                )),
                                                Tab(
                                                    icon: Icon(
                                                  Icons.directions_transit,
                                                  color: Colors.black,
                                                )),
                                              ],
                                            ),
                                            Expanded(
                                              child: TabBarView(
                                                controller: _controller,
                                                children: <Widget>[
                                                  Column(
                                                    children: <Widget>[
                                                      Text(
                                                        'the first tab view',
                                                        style: TextStyle(
                                                            fontSize: 24),
                                                      ),
                                                      SizedBox(height: 26),
                                                      Container(
                                                          height: 73,
                                                          width: MediaQuery.of(
                                                                      context)
                                                                  .size
                                                                  .width -
                                                              24,
                                                          decoration: BoxDecoration(
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          5),
                                                              color:
                                                                  colorPrimary,
                                                              border: Border.all(
                                                                  width: 0.5,
                                                                  color: Colors
                                                                      .redAccent)),
                                                          child: Align(
                                                            alignment: Alignment
                                                                .center,
                                                            child: TextField(
                                                              maxLength: 30,
                                                              enableInteractiveSelection:
                                                                  false,
                                                              keyboardType:
                                                                  TextInputType
                                                                      .number,
                                                              style: TextStyle(
                                                                  height: 1.6),
                                                              cursorColor:
                                                                  Colors.green[
                                                                      800],
                                                              textAlign:
                                                                  TextAlign
                                                                      .center,
                                                              autofocus: false,
                                                              decoration:
                                                                  InputDecoration(
                                                                border:
                                                                    InputBorder
                                                                        .none,
                                                                hintText:
                                                                    'Internet',
                                                                counterText: "",
                                                              ),
                                                            ),
                                                          )),
                                                    ],
                                                  ),
                                                  Column(
                                                    children: <Widget>[
                                                      Text(
                                                        'the second tab view',
                                                        style: TextStyle(
                                                            fontSize: 24),
                                                      ),
                                                      SizedBox(height: 26),
                                                      Container(
                                                          height: 73,
                                                          width: MediaQuery.of(
                                                                      context)
                                                                  .size
                                                                  .width -
                                                              24,
                                                          decoration: BoxDecoration(
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          5),
                                                              color:
                                                                  colorPrimary,
                                                              border: Border.all(
                                                                  width: 0.5,
                                                                  color: Colors
                                                                      .redAccent)),
                                                          child: Align(
                                                            alignment: Alignment
                                                                .center,
                                                            child: TextField(
                                                              maxLength: 30,
                                                              enableInteractiveSelection:
                                                                  false,
                                                              keyboardType:
                                                                  TextInputType
                                                                      .number,
                                                              style: TextStyle(
                                                                  height: 1.6),
                                                              cursorColor:
                                                                  Colors.green[
                                                                      800],
                                                              textAlign:
                                                                  TextAlign
                                                                      .center,
                                                              autofocus: false,
                                                              decoration:
                                                                  InputDecoration(
                                                                border:
                                                                    InputBorder
                                                                        .none,
                                                                hintText:
                                                                    'Credit',
                                                                counterText: "",
                                                              ),
                                                            ),
                                                          )),
                                                    ],
                                                  )
                                                ],
                                              ),
                                            )
                                          ]),
                                    ),
                                  ));
                            }),
                          ),
                        );
                      });
                }),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
于 2020-07-28T09:08:27.790 回答