flutter中【底部弹出输入框】实现
在Flutter中,可以使用showModalBottomSheet
函数来实现一个从底部弹出的输入框。这里是一个简单的例子:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Bottom Sheet Example'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: 'Enter text'),
),
RaisedButton(
child: Text('Submit'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
);
},
);
},
child: Icon(Icons.add),
),
),
);
}
}
这段代码定义了一个包含FloatingActionButton的App,当点击FloatingActionButton时,会弹出一个包含TextField和一个RaisedButton的BottomSheet。用户可以在TextField中输入文本,点击RaisedButton关闭BottomSheet。
评论已关闭