flutter - 如何使屏幕在颤动时可滚动（带有文本字段）
问题描述
我有一段用于飞镖页面的代码。我有 3 个文本字段（我需要再添加 6 个）。但我收到诸如“底部溢出”之类的错误。如何让屏幕接受 9 个文本字段并可以滚动？我试图用 ListView 包装该列，但它仍然显示错误。我确定我没有正确包装它，因为我是飞镖新手。
//主页面代码//
import 'package:flutter/material.dart';
import 'package:flutter_app/screens/griddashboard/griddashboard.dart';
import 'package:flutter_app/screens/zakatcalculator/zakatcalculator.dart';
import 'package:google_fonts/google_fonts.dart';
void main() => runApp(MaterialApp(
home: Home(),
));
class Home extends StatefulWidget {
@override
HomeState createState() => new HomeState();
}
class HomeState extends State<Home> {
int _currentIndex = 0;
List<BottomNavigationBarItem> items = [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.calculate),
label: 'Zakat Calculator',
backgroundColor: Color(0xffde0486),
),
BottomNavigationBarItem(
icon: Icon(Icons.request_page),
label: 'Donate',
backgroundColor: Color(0xffde0486),
),
BottomNavigationBarItem(
icon: Icon(Icons.face),
label: 'Beneficiary',
backgroundColor: Color(0xffde0486),
),
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Contact Us',
backgroundColor: Color(0xffde0486),
),
];
Widget activeScreen;
List<Widget> screens = [GridDashboard(), ZakatCalculator()];
@override
Widget build(BuildContext context) {
this.activeScreen = this.screens[this._currentIndex];
return Scaffold(
backgroundColor: Color(0xFFFFFFFF),
body: Column(
children: <Widget>[
SizedBox(
height: 120,
),
Padding(
padding: EdgeInsets.only(left: 16, right: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
CircleAvatar(
radius: 20,
backgroundColor: Colors.white,
backgroundImage: AssetImage('assets/account.png'),
),
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Account",
style: GoogleFonts.openSans(
textStyle: TextStyle(
color: Color(0xff000000),
fontSize: 18,
fontWeight: FontWeight.normal)),
),
),
],
)
],
),
),
],
),
],
),
),
SizedBox(
height: 40,
),
this.activeScreen
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
items: this.items,
onTap: (index) {
setState(() {
_currentIndex = index;
});
}),
);
}
}
//ZAKATCALCULATOR 页面代码//
import 'package:flutter/material.dart';
import 'package:flutter_app/common/BaseClass.dart';
import 'package:flutter_app/common/stateMonitor.dart';
import 'package:google_fonts/google_fonts.dart';
import 'zakatcalculatorController.dart';
import 'package:flutter_app/common/button_widget.dart';
class ZakatCalculator extends StatefulWidget {
@override
_ZakatCalculatorState createState() => _ZakatCalculatorState();
}
class _ZakatCalculatorState extends State<ZakatCalculator>
with View<ZakatCalculator> {
ZakatCalculatorController controller = new ZakatCalculatorController();
@override
Widget getBody() {
return Theme(
data: new ThemeData(
primaryColor: Color(0xffde0486),
),
child: ListView(
/// Changed Part
scrollDirection: Axis.vertical,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
prefixText: 'Value',
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Resale value of shares',
helperText: '',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Stock of Goods',
helperText: '',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
suffixText: 'Rs',
suffixStyle: TextStyle(
color: Color(0xffde0486),
),
labelText: 'Cash',
helperText: 'Nisab Amount is Rs 30,000',
prefixIcon: Icon(Icons.attach_money),
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
style: TextStyle(color: Color(0xffde0486)),
autofocus: true,
),
),
],
),
);
}
@override
Controller getController() {
return this.controller;
}
@override
InstanceNames getName() {
return InstanceNames.ZakaatCalculator;
}
}
解决方案
Column用替换ListView或换Column行SingleChildScrollView。
这是因为Column它并不真正关心滚动，它只是试图渲染它的孩子。
推荐阅读
- java - 如何使用 @EmbeddedId 在两个表之间进行映射？
- vba - VBA - 刷新除工作簿中的所有表
- javascript - 如何使用字段ID通过javascript在输入字段中添加占位符
- google-apps-script - 存档（仅复制内容）电子表格中的某些工作表
- anaconda - 无法在 Windows 上运行 anaconda 和 anaconda-prompt
- business-intelligence - 如何在 OBIEE 12c 中获得美元（$）符号？
- android - 如何使用纬度和经度获取地址信息？
- c++ - 范围 v3 any_view & 常量
- c# - 转换为 void 返回委托的 AsyncLazy 匿名函数无法返回值
- java - 我明白了：线程“LWJGL 应用程序”com.badlogic.gdx.utils.SerializationException 中的异常：解析文件时出错：mar.tmx