如何在Flutter中在Appbar下添加文本字段

Question

我试图在我的绘画应用程序的顶部应用程序栏下方添加一个TextField，但我不知道如何做到。我尝试在线寻找soltotoins，但没有找到任何...

@override
  Widget build(BuildContext context)
  {
    return Scaffold(
      appBar: new AppBar(title: new Center(child: new Text("Draw 1102 - Beta Version", textAlign: TextAlign.center))),
      body: 
      Column(children: <Widget>[ TextField() ],),  // Does not work
      Container( 
        child: GestureDetector(
          onPanUpdate: (DragUpdateDetails details)
          {
            setState(()
            {
              RenderBox _object = context.findRenderObject();
              //More code...
            });
          },

Answer 1

您可以将PreferredSize Widget用作AppBars bottom属性。PreferredSize小部件也有一个孩子，您可以在其中放置TextField。

您只需要手动为PreferredSize找到合适的height。

Answer 2

添加

extendBodyBehindAppBar: true

您的Scaffold的财产

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(title: Center(child: Text("Draw 1102 - Beta Version", textAlign: TextAlign.center))),
        body: Column(children: <Widget>[ TextField() ],),
      ),
    );
  }
}