当Textfeild位于TabBar中时,resizeToAvoidBottomPadding不起作用

时间:2019-12-02 11:01:30

标签: flutter

以防万一,如果页面的屏幕上半部分有一些数据,而屏幕的下半部分中有一个标签栏,则标签栏视图包含一个 inputtextfield ,即使将 resizeToAvoidBottomPadding 设置为 true < / strong>,

  

键盘涵盖了输入字段

     

并且它不会向上滚动。

下面提供了父窗口小部件页面:

 class ParentWidget extends StatefulWidget {

 @override
 _ParentWidgetState createState() => _ParentWidgetState();

 }
class ParentWidget extends StatefulWidget {

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

class _ParentWidgetState extends State<ParentWidget> with TickerProviderStateMixin{
 List<Tab> tabList = List();
 int _index;
 int _currentIndex;

TabController _tabController;

_handleTabSelection() {
  setState(() {
    _currentIndex = _tabController.index;
    print("index"+_currentIndex.toString());

  });
 }
@override
void initState() {
  super.initState();
 _tabController = new TabController(vsync: this, length: tabList.length);
  _index = 0;
 tabList.add(new Tab(
   child: Text(
     "Tab1",
   ),
 ));

 tabList.add(new Tab(
   child: Text(
     "Tab2",
   ),
 ));

 tabList.add(new Tab(
   child: Text(
     "Tab3",
   ),
 ));
 setState(() {
   _tabController = new TabController(vsync: this, length: tabList.length);
   _tabController.addListener(_handleTabSelection);
   this._index = _index;
   print(_index);
 });
 }
 @override
 Widget build(BuildContext context) {
  return Scaffold(
  resizeToAvoidBottomPadding: false,

  appBar: AppBar(
    backgroundColor: Colors.white,
    elevation: 0.0,
    titleSpacing: 0.0,
    brightness: Brightness.light,
    centerTitle: false,
    iconTheme: IconThemeData(
      color: Colors.black,
    ),
    leading: IconButton(
      icon: Icon(
        Icons.arrow_back,
        color: Colors.black,
        size: 30.0,
      ),
      onPressed: () => Navigator.pop(context),
    ),

    title: Text(
      "Demo",
      style: TextStyle(
        fontSize: 16,
        fontFamily: "IBMPlexSans",
        fontWeight: FontWeight.w500,
        color: Colors.black,
      ),
      textAlign: TextAlign.left,
    ),
  ),

  body: Container(
    color: Colors.white,
    child: Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.symmetric(horizontal: 20),
          height: 150.0,
          decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://img.etimg.com/thumb/msid-66398917,width-643,imgsize-702055,resizemode-4/bill-gates-wants-to-reinvent-the-toilet-save-233-billion-while-at-it.jpg'
                )
            ),
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
            color: Colors.redAccent,
          ),
        ),

        Container(
          margin: EdgeInsets.symmetric(horizontal: 20,vertical: 10),
          child: Text(
            "Description: William Henry Gates III (born October 28, 1955) is an American business magnate, software developer, investor, and philanthropist. He is best known as the co-founder of Microsoft Corporation.",
            style: TextStyle(
              fontSize: 12,
              color: Colors.black54,
              fontWeight: FontWeight.w400,
            ),
          ),
        ),

        Container(
          margin: EdgeInsets.symmetric(horizontal: 20,vertical: 10),
          height: 150.0,
          decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://image.businessinsider.com/5c62d63c2628982cad752452?width=1100&format=jpeg&auto=webp'
                )
            ),
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
            color: Colors.redAccent,
          ),
        ),

        Container(
          margin: EdgeInsets.symmetric(horizontal: 20,vertical: 10),
          child: Text(
            "Description: William Henry Gates III (born October 28, 1955) is an American business magnate, software developer, investor, and philanthropist. He is best known as the co-founder of Microsoft Corporation.",
            style: TextStyle(
              fontSize: 12,
              color: Colors.black54,
              fontWeight: FontWeight.w400,
            ),
          ),
        ),

        Container(
          margin: EdgeInsets.only(left:20,
              right: 20),
          height: (40),
          child: TabBar(
            isScrollable: true,
            controller: _tabController,
            indicatorColor: Colors.blueAccent,
            labelColor: Colors.blueAccent,
            unselectedLabelColor: Colors.black54,
            indicatorSize: TabBarIndicatorSize.tab,
            tabs: tabList,
            unselectedLabelStyle: TextStyle(
              fontSize: 14,
              fontFamily: "IBMPlexSans",
              fontWeight: FontWeight.w400,
            ),
            labelStyle: TextStyle(
              fontSize: 14,
              fontFamily: "IBMPlexSans",
              fontWeight: FontWeight.w500,
            ),
            indicator:  UnderlineTabIndicator(
              borderSide: BorderSide(width: 2.0,color: Colors.blueAccent ),
              insets: EdgeInsets.symmetric(horizontal:0.0),

            ),
          ),
        ),

        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: [
              ChildWidget(),
              ChildWidget(),
              ChildWidget(),
            ],
          ),
        ),
      ],
    ),
  ),
);
}
 }

以下提供了子窗口小部件代码:

class ChildWidget extends StatefulWidget {
 @override
_ChildWidgetState createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {

@override
Widget build(BuildContext context) {
return Column(
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(left: 20, top: 20),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          /**Circular Avatar**/
          Container(
            height: 30,
            width: 30,
            margin: EdgeInsets.only(left: 0, top: 0),

            decoration: new BoxDecoration(
                shape: BoxShape.circle,
                image: new DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(
                        'https://img.etimg.com/thumb/msid-66398917,width-643,imgsize-702055,resizemode-4/bill-gates-wants-to-reinvent-the-toilet-save-233-billion-while-at-it.jpg'))),
          ),
          Expanded(
            child: Container(
              height: 40,
              margin: EdgeInsets.only(left: 20,right: 20),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color:Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(5)),
              ),
              child: Row(
                children: <Widget>[
                  Container(
                    height: 18,
                    width: 200,
                    margin: EdgeInsets.only(left: 13,top: 10,bottom: 10),
                    child: GestureDetector(
                      child: TextFormField(
                        style: TextStyle(
                          color: Colors.black38,
                          fontWeight: FontWeight.bold,
                          fontStyle: FontStyle.normal,
                          fontSize: 14,
                        ),
                        textInputAction: TextInputAction.done,
                        decoration: new InputDecoration.collapsed
                          (
                          hintText:  "Post Query",
                          hintStyle: TextStyle (
                            color: Colors.white30,
                            fontWeight: FontWeight.w400,
                            fontStyle: FontStyle.normal,
                            fontSize: 14,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
    Expanded(
      child: ListView.separated(
        itemCount: 1000,
        itemBuilder: (context, index) {
          return    ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('Sun'),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
      ),
    ),
  ],
);
}
}

以下是屏幕截图:

Keyboard hiding the input textfield

The actual placement of the input text field in the page

0 个答案:

没有答案