flutter - 如何在我的代码中添加浮动操作按钮
问题描述
我正在尝试在我的颤振应用程序中添加浮动操作按钮,并且由于只能实现一个孩子,我无法弄清楚我应该将浮动操作按钮的代码放在哪里。
我可以把它作为孩子放在列中,但它不会出现在屏幕的左下角。我还尝试创建另一个类,然后将其放在脚手架小部件中,但是我的 _favCity 将不包括在内
....
class _favCity extends State<favCity> {
String city1, city2;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Email Login"),
centerTitle: true,
),
backgroundColor: Colors.cyan,
body: Container(
margin: EdgeInsets.all(40.0),
color: Colors.brown,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
//color: Colors.white,
child: TextField(
decoration: new InputDecoration(
labelText: "Enter City 1",
fillColor: Colors.orange,
border: new OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
onSubmitted: (String userInput) {
setState(() {
city1 = userInput;
});
},
),
),
Container(
padding: EdgeInsets.all(10.0),
// color: Colors.white,
child: TextField(
decoration: InputDecoration(
labelText: "Enter city 2",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
fillColor: Colors.orange,
),
onChanged: (String UserInput) {
setState(() {
city2 = UserInput;
});
},
),
),
Text("$city1 Is better than $city2"),
],
),
),
);
}
}
解决方案
Afloating action button
也是 awidget
并且可以使用以下代码放置在应用程序中。
import 'package:flutter/material.dart';
class FAButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FAB Button Example'),
),
body: Center(
child: Text('Floating Action Button Screen'),
),
//FAB is a property of the `Scaffold` Widget
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
//Widget to display inside Floating Action Button, can be `Text`, `Icon` or any widget.
onPressed: () {
//Code to execute when Floating Action Button is clicked
//...
},
),
);
}
}
有关 FAB 的更多参考或进一步自定义它,请参阅此 链接
推荐阅读
- flutter - 为什么登录flutter应用程序后显示黑屏而不是背景图像?
- scala - 如何合并 Spark Scala 数据框 - 基于条件的多行合二为一
- tcp - TCP如何区分由于接收方损坏的段或由于拥塞而丢失的段?
- python - (Python)在我连续收到事件后需要帮助来打破 while 循环
- python-3.x - 如何从 CRM 中的操作下拉列表中隐藏基于组的存档/取消存档和删除按钮
- r - 在 R 中更改小部件的大小调整策略并保存
- node.js - Express.JS:如何处理 Busboy 的错误?
- c++ - 有没有办法检查 C++ 中的最大方法长度?
- php - 在 Laravel 中搜索工作
- r - c5.0() 如何选择决策和根节点?