仅滚动特定的容器
我有以下屏幕，我需要固定图像区域，并且在打开键盘时需要滚动窗体部分：
为什么滚动不适用于表单部分？我同时尝试了SingleChildScrollView和import 'package:ahgora/models/user.dart';
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final _user = User();
final _formKey = GlobalKey<FormState>();
final _tokenNode = FocusNode();
final _userNode = FocusNode();
final _passwordNode = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Builder(
builder: (context) => Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
child: Image.asset("assets/images/logo.jpg",
fit: BoxFit.scaleDown,
width: 160,
alignment: Alignment.center),
margin: EdgeInsets.only(top: 100.0),
),
ListView(shrinkWrap: true, children: <Widget>[
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _tokenNode,
onFieldSubmitted: (term) {
_fieldFocusChange(context, _tokenNode, _userNode);
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Chave ',
),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _userNode,
onFieldSubmitted: (term) {
_fieldFocusChange(
context, _userNode, _passwordNode);
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Usuário'),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _passwordNode,
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Senha'),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: MaterialButton(
color: Colors.redAccent,
textColor: Colors.white,
onPressed: () => {},
child: Text('Registrar'),
),
)
]),
],
),
),
),
),
);
}
_fieldFocusChange(
BuildContext context, FocusNode currentFocus, FocusNode nextFocus) {
currentFocus.unfocus();
FocusScope.of(context).requestFocus(nextFocus);
}
}
，但是只有当我用它包装了全部内容（图像和表格）时，它才起作用。
{{1}}
3 个答案:
答案 0 :(得分：1)
我做了一些零钱，如果可行，请尝试一下。
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final _formKey = GlobalKey<FormState>();
final _tokenNode = FocusNode();
final _userNode = FocusNode();
final _passwordNode = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
child: Builder(
builder: (context) => Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
child: Image.network("http://www.militaryzone.eu/www/ir/produkt-images/108561-image0--mm344x300.jpg",
fit: BoxFit.scaleDown,
width: 160,
alignment: Alignment.center),
margin: EdgeInsets.only(top: 100.0),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _tokenNode,
onFieldSubmitted: (term) {
_fieldFocusChange(context, _tokenNode, _userNode);
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Chave ',
),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _userNode,
onFieldSubmitted: (term) {
_fieldFocusChange(
context, _userNode, _passwordNode);
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Usuário'),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _passwordNode,
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Senha'),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: MaterialButton(
color: Colors.redAccent,
textColor: Colors.white,
onPressed: () => {},
child: Text('Registrar'),
),
)
],
),
),
),
),
),
);
}
_fieldFocusChange(
BuildContext context, FocusNode currentFocus, FocusNode nextFocus) {
currentFocus.unfocus();
FocusScope.of(context).requestFocus(nextFocus);
}
}
使用Expand
class _HomeState extends State<Home> {
final _formKey = GlobalKey<FormState>();
final _tokenNode = FocusNode();
final _userNode = FocusNode();
final _passwordNode = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
child: Builder(
builder: (context) => Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
child: Image.network("http://www.militaryzone.eu/www/ir/produkt-images/108561-image0--mm344x300.jpg",
fit: BoxFit.scaleDown,
width: 160,
alignment: Alignment.center),
margin: EdgeInsets.only(top: 100.0),
),
Expanded(
child: ListView(shrinkWrap: true, children: <Widget>[
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _tokenNode,
onFieldSubmitted: (term) {
_fieldFocusChange(context, _tokenNode, _userNode);
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Chave ',
),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _userNode,
onFieldSubmitted: (term) {
_fieldFocusChange(
context, _userNode, _passwordNode);
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Usuário'),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _passwordNode,
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Senha'),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: MaterialButton(
color: Colors.redAccent,
textColor: Colors.white,
onPressed: () => {},
child: Text('Registrar'),
),
)
]),
),
],
),
),
),
),
);
}
_fieldFocusChange(
BuildContext context, FocusNode currentFocus, FocusNode nextFocus) {
currentFocus.unfocus();
FocusScope.of(context).requestFocus(nextFocus);
}
}
答案 1 :(得分：0)
您只需要用SingleChildScrollView Widget来包装您的专栏，您就可以振作起来。
SingleChildScrollView(child: Column( children: <Widget>[]))
答案 2 :(得分：0)
//如果只需要滚动表单部分，
然后只需将您的ListView小部件包装为Flexible小部件即可。
Scaffold(
body: Container(
child: Builder(
builder: (context) => Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
child: Image.network(
"https://buildflutter.com/wp-content/uploads/2018/04/buildflutter_255.png",
fit: BoxFit.scaleDown,
width: 160,
alignment: Alignment.center),
margin: EdgeInsets.only(top: 100.0),
),
Flexible(
child: ListView(shrinkWrap: true, children: <Widget>[
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _tokenNode,
onFieldSubmitted: (term) {
_fieldFocusChange(context, _tokenNode, _userNode);
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Chave ',
),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _userNode,
onFieldSubmitted: (term) {
_fieldFocusChange(context, _userNode, _passwordNode);
},
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Usuário'),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: TextFormField(
textInputAction: TextInputAction.next,
focusNode: _passwordNode,
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Senha'),
),
),
Container(
margin: EdgeInsets.all(20.0),
child: MaterialButton(
color: Colors.redAccent,
textColor: Colors.white,
onPressed: () => {},
child: Text('Registrar'),
),
)
]),
),
],
),
),
),
),
);
//如果您需要滚动整个页面
您需要将Form小部件包装在SingleChildScrollView小部件内。
SingleChildScrollView（ scrollDirection：Axis.vertical， child：Form（）//在此处包装整个Form。 ）
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？