[英]Flutter rebuilds after keyboard opens/closes
目前,我正在處理應用程序的更新配置文件部分,但似乎存在問題。 問題是當我們想要 go 到頁面時,我們希望看到加載了使用以前數據或舊數據的文本字段。 為此,我們使用未來的構建器來獲取數據,然后將其設置到字段中。 但是,當我們在移動設備上使用鍵盤點擊和編輯文本字段時,會發生未來的構建器再次重建,因為由於屏幕大小的變化而調用了構建,鍵盤上下移動。 在我們解決他的問題時,我要做的是創建一個臨時的未來變量,它只有在 null 時才會更新。 最重要的是,僅當計數等於某個值 IE 時,文本字段才會更新,在本例中為 1,但它不起作用。 每次我們 go 到頁面 AKA 刷新或單擊提交按鈕時,我們都希望在文本字段中放置文本。 這是我有點麻煩的地方。 我試過使用狀態,我得到了相同的結果,也許我設置錯了。
目標:加載數據,使用我剛剛獲得的數據設置文本字段,根據需要對其進行編輯(鍵盤向上或向下時數據保持不變)。 然后通過更新按鈕更新該數據。
old:
class Test extends StatelessWidget {
Future<void> getFuture() async {
_profile = await HTTP.getProfile();
}
Widget build(BuildContext context) {
return FutureBuilder(
future: getFuture(); // generate every time
builder: () {
return nameFeild();
}
)
}
Widget nameFeild(){
_changeNameController.text = _profile.name;
return TextField(controller: _nameController);
}
}
new:
class Test extends StatelessWidget {
Future testFuture;
static int count = 0;
Future<void> getFuture() async {
_profile = await HTTP.getProfile();
}
Widget build(BuildContext context) {
testFuture ??= getFuture();
count++;
return FutureBuilder(
future: testFuture; // generate every time
builder: () {
return nameFeild();
}
)
}
Widget nameFeild(){
if(count == 1){
_changeNameController.text = _profile.name;
}
return TextField(controller: _nameController);
}
}
實際代碼
// imports
class UserSettingPage extends StatelessWidget {
BuildContext context;
GetSizes _sizes;
double _w;
double _h;
NavbarWidget _navBar = NavbarWidget();
FooterWidget _footer = FooterWidget.autoPosition();
ImageProvider _userPicture =
AssetImage('assets/images/team/zain.png'); //Defaultpic.png');
Cookies _cookies = Cookies();
final _oldPasswordControllerOne = TextEditingController();
final _resetPasswordControllerOne = TextEditingController();
final _resetPasswordControllerTwo = TextEditingController();
final _changeNameController = TextEditingController();
final _changeBioController = TextEditingController();
final _changeNumberController = TextEditingController();
final _changeFacebookController = TextEditingController();
final _changeTwitterController = TextEditingController();
final _changeInstagramController = TextEditingController();
CheckBoxValueNotifier email = new CheckBoxValueNotifier(false);
CheckBoxValueNotifier phone = new CheckBoxValueNotifier(false);
bool _isDesktop;
Authentication _authentication = Authentication();
Encryption _encryption = Encryption();
DialogBox _dialog = DialogBox();
passwordValidNotifier passwordNotifier = new passwordValidNotifier();
ProfileModel _user;
Uint8List _base64;
bool phoneCheckedValue = false;
bool emailCheckedValue = false;
String userID;
FilePickerWidget imagePicker = FilePickerWidget();
Future _getUser;
static int count = 0;
Future<String> retrieveUser() async {
userID = await Cookies.getCookieValue("userID");
await DioCalls.getProfile(context, userID).then((value) => _user = value);
}
@override
Widget build(BuildContext context) {
this.context = context;
_sizes = GetSizes(context);
_w = _sizes.getPageWidth();
_h = _sizes.getPageHeight();
_isDesktop = _sizes.isDesktop();
print('Update Data: ' + (_getUser == null).toString() + ' count: ' + count.toString());
_getUser ??= retrieveUser();
count++;
return LayoutBuilder(builder: (context, constraints) {
if (_sizes.isDesktop()) {
return _bigDisplay();
} else {
return _smallDisplay();
}
});
}
Widget _bigDisplay() {
// code
}
Widget _smallDisplay() {
return FutureBuilder(
future: _getUser,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: Text(''));
} else {
if (snapshot.hasError) {
return Center(child: Text('Errors: ${snapshot.error}'));
} else {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
_navBar,
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [userPictureAndBorder()],
),
userInfo(),
line(),
changeNameTile(),
line(),
changeBioTile(),
line(),
changeSocialMediaTile(),
line(),
changeNotificationTile(),
line(),
changePasswordTile(),
line(),
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [logoutButton(), updateButton(context)],
),
)
],
),
),
)
],
),
);
}
}
},
);
}
// OTHER WIDGETS CODE WERE REMOVED, I dont think you need them
Widget userInfo() {
return Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 10),
alignment: Alignment.center,
child: Column(
children: [
SelectableText(
_user.userID,
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 14,
color: Colors.black,
// height: 21,
),
),
SelectableText(
_user.name,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
color: Colors.black,
// height: 21,
),
),
SelectableText(
'732-318-5555 (change)',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
color: Colors.black,
// height: 21,
),
),
],
),
);
}
Widget logoutButton() {
return ElevatedButton.icon(
onPressed: () {
print('Logging out');
},
icon: Icon(Icons.logout),
label: Text("Logout"),
style: ElevatedButton.styleFrom(
primary: Colors.black, // background
onPrimary: Colors.white, // foreground
),
);
}
Widget updateButton(BuildContext context) {
return ElevatedButton.icon(
onPressed: () async {
_user.name = _changeNameController.text;
_user.bio = _changeBioController.text;
_user.socialMedia.Facebook = _changeFacebookController.text;
_user.socialMedia.Instagram = _changeInstagramController.text;
_user.socialMedia.Twitter = _changeTwitterController.text;
DioCalls.updateProfile(context, _user, imagePicker.selectedFile,
await Cookies.getCookieValue("jwt"));
Navigator.pop(context); // pop current page
Navigator.pushNamed(context, "/test1"); // push it back in
_oldPasswordControllerOne.clear();
_changeBioController.clear();
count = 0;
_getUser = null;
},
icon: Icon(Icons.update),
label: Text("Update"),
style: ElevatedButton.styleFrom(
primary: Colors.black, // background
onPrimary: Colors.white, // foreground
),
);
}
Widget nameTextField() {
return SelectableText(
"Edit Name",
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
fontStyle: FontStyle.normal,
fontFamily: 'Poppins-Black',
fontWeight: FontWeight.w500,
),
);
}
Widget bioTextField() {
return SelectableText(
"Edit Bio (Max: 100)",
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
fontStyle: FontStyle.normal,
fontFamily: 'Poppins-Black',
fontWeight: FontWeight.w500,
),
);
}
Widget changeNameTile() {
if (count == 1) {
print('updating text');
_changeNameController.text = _user.name;
}
return ExpansionTile(
title: Text(
'Name',
style: TextStyle(
fontSize: (_sizes.isDesktop()) ? 16 : 12,
fontWeight: FontWeight.w500,
color: Colors.black),
textAlign: TextAlign.left,
),
children: [
nameTextField(),
Container(
margin: EdgeInsets.all(20),
child: Theme(
data: ThemeData(
primaryColor: Colors.transparent,
hintColor: Colors.transparent),
child: TextField(
maxLength: 50,
controller: _changeNameController,
decoration: InputDecoration(
counterText: '',
contentPadding: EdgeInsets.all(20.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).errorColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
),
),
),
)
],
);
}
Widget changeBioTile() {
if (count == 1) {
_changeBioController.text = _user.bio;
}
return ExpansionTile(
title: Text(
'Bio',
style: TextStyle(
fontSize: (_sizes.isDesktop()) ? 16 : 12,
fontWeight: FontWeight.w500,
color: Colors.black),
textAlign: TextAlign.left,
),
children: [
bioTextField(),
Container(
margin: EdgeInsets.all(20),
child: Theme(
data: ThemeData(
primaryColor: Colors.transparent,
hintColor: Colors.transparent),
child: TextField(
maxLength: 100,
controller: _changeBioController,
decoration: InputDecoration(
counterText: '',
contentPadding: EdgeInsets.all(20.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).errorColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
),
),
),
)
],
);
}
Widget changeSocialMediaTile() {
if (count == 1) {
_changeFacebookController.text = _user.socialMedia.Facebook;
_changeTwitterController.text = _user.socialMedia.Twitter;
_changeInstagramController.text = _user.socialMedia.Instagram;
}
return ExpansionTile(
title: Text(
'Social Media',
style: TextStyle(
fontSize: (_sizes.isDesktop()) ? 16 : 12,
fontWeight: FontWeight.w500,
color: Colors.black),
textAlign: TextAlign.left,
),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
MyFlutterApp.facebook,
color: Colors.blue,
size: 30,
),
SelectableText("www.Facebook.com/"),
Container(
margin: EdgeInsets.all(5),
width: 200,
child: Theme(
data: ThemeData(
primaryColor: Colors.transparent,
hintColor: Colors.transparent),
child: TextField(
maxLength: 100,
controller: _changeFacebookController,
decoration: InputDecoration(
counterText: '',
contentPadding: EdgeInsets.all(5.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
errorBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).errorColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
),
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
MyFlutterApp.twitter,
color: Colors.lightBlue,
size: 30,
),
SelectableText("www.Twitter.com/ "),
Container(
margin: EdgeInsets.all(5),
width: 200,
child: Theme(
data: ThemeData(
primaryColor: Colors.transparent,
hintColor: Colors.transparent),
child: TextField(
maxLength: 100,
controller: _changeTwitterController,
decoration: InputDecoration(
counterText: '',
contentPadding: EdgeInsets.all(5.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
errorBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).errorColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
),
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(MyFlutterApp.instagram, color: Colors.black, size: 30.0),
SelectableText("www.Instagram.com/"),
Container(
margin: EdgeInsets.all(5),
width: 200,
child: Theme(
data: ThemeData(
primaryColor: Colors.transparent,
hintColor: Colors.transparent),
child: TextField(
maxLength: 100,
controller: _changeInstagramController,
decoration: InputDecoration(
counterText: '',
contentPadding: EdgeInsets.all(5.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
errorBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).errorColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
),
),
),
)
],
)
],
);
}
Widget changeNotificationTile() {
return ExpansionTile(
title: Text(
'Notifications',
style: TextStyle(
fontSize: (_sizes.isDesktop()) ? 16 : 12,
fontWeight: FontWeight.w500,
color: Colors.black),
textAlign: TextAlign.left,
),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.phone_iphone),
Container(
margin: EdgeInsets.all(5),
width: 200,
child: Theme(
data: ThemeData(
primaryColor: Colors.transparent,
hintColor: Colors.transparent),
child: TextField(
maxLength: 100,
controller: _changeNumberController,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
],
decoration: InputDecoration(
counterText: '',
contentPadding: EdgeInsets.all(5.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
errorBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).errorColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(Radius.circular(
10) // <--- border radius here
),
),
),
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 275,
child: emailTile(
checkBoxValueNotifier: email,
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 275,
child: phoneTile(
checkBoxValueNotifier: phone,
),
)
],
)
],
);
}
}
class emailTile extends StatefulWidget {
@override
final CheckBoxValueNotifier checkBoxValueNotifier;
const emailTile({Key key, this.checkBoxValueNotifier}) : super(key: key);
_emailTileState createState() => _emailTileState();
}
class _emailTileState extends State<emailTile> {
@override
Widget build(BuildContext context) {
return CheckboxListTile(
value: widget.checkBoxValueNotifier.check.value,
secondary: Icon(
Icons.email_rounded,
color: Colors.black,
size: 30,
),
title: SelectableText("Email Notifications"),
onChanged: (newValue) {
setState(() {
widget.checkBoxValueNotifier.check.value =
!widget.checkBoxValueNotifier.check.value;
});
},
controlAffinity:
ListTileControlAffinity.trailing, // <-- leading Checkbox
);
}
}
class phoneTile extends StatefulWidget {
@override
final CheckBoxValueNotifier checkBoxValueNotifier;
const phoneTile({Key key, this.checkBoxValueNotifier}) : super(key: key);
_phoneTileState createState() => _phoneTileState();
}
class _phoneTileState extends State<phoneTile> {
@override
Widget build(BuildContext context) {
return CheckboxListTile(
value: widget.checkBoxValueNotifier.check.value,
secondary: Icon(
Icons.phone_iphone,
color: Colors.black,
size: 30,
),
title: SelectableText("Phone Notifications"),
onChanged: (newValue) {
setState(() {
widget.checkBoxValueNotifier.check.value =
!widget.checkBoxValueNotifier.check.value;
});
},
controlAffinity:
ListTileControlAffinity.trailing, // <-- leading Checkbox
);
}
}
class CheckBoxValueNotifier {
ValueNotifier check;
CheckBoxValueNotifier(bool init) {
check = ValueNotifier(init);
}
void toggleNotifier() {
check.value = !check.value;
}
}
在old:
和new:
示例中,對getFuture()
的調用都是在build()
方法中完成的。
這不是任何類型的長時間調用的正確位置。 build()
通常應該只包含 UI 顯示代碼,因為小部件的build
方法理論上每秒可以發生 60 次(例如,如果您在小部件中使用 animation)。
我猜每次您的小部件重建時(由於鍵盤顯示或其他需要重建的更改),您未來的數據調用再次發生,這會觸發FutureBuilder
的重建。
我建議從Stateless
小部件切換到StatefulWidget
並將getFuture()
調用放入StatefulWidget
的initState()
方法中,當StatefulWidget
被實例化時它將只運行一次,但不會在其重建時再次運行(當您的鍵盤顯示/隱藏等時可能會發生)。
這是一些如何工作的示例代碼:
*(順便說一句,當鍵盤顯示/隱藏時,我沒有看到以下代碼的Stateful
或Stateless
版本的重建。不知道為什么。)
import 'package:flutter/material.dart';
class StatefulRebuildPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('Base Stateless Page widget re/built');
return Scaffold(
appBar: AppBar(
title: Text('Stateful Rebuild Page'),
),
body: FormPageStateful(), // ← swap between these two to test
//body: FormPageStateless(), // ← swap between these two to test
);
}
}
/// StateLESS version of FormPage
/// ////////////////////////////////////
class FormPageStateless extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('FormPageStateless re/built');
return MyFutureBuilderWidget(FakeFutureDataSource.getData());
}
}
/// StateFUL version of FormPage
/// ////////////////////////////////////
class FormPageStateful extends StatefulWidget {
@override
_FormPageStatefulState createState() => _FormPageStatefulState();
}
class _FormPageStatefulState extends State<FormPageStateful> {
Future<String> _nameData = Future.value('loading data...');
@override
void initState() {
super.initState();
_nameData = FakeFutureDataSource.getData();
/// Long data call happens ↑ here ↑ only once
}
@override
Widget build(BuildContext context) {
print('FormPage re/built');
return MyFutureBuilderWidget(_nameData); // ← supply the future
}
}
class MyFutureBuilderWidget extends StatelessWidget {
final Future<String> _nameData;
MyFutureBuilderWidget(this._nameData);
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 25),
child: FutureBuilder<String>(
future: _nameData, // ← when future returns, ↓ will get rebuilt with future data
builder: (context, snapshot) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_nameField(snapshot.hasData ? snapshot.data : 'loading...')
],
);
},
),
);
}
Widget _nameField(String name) {
return TextFormField( // ← is a stateful widget underneath
key: ValueKey(name), // ← key used for framework to know this widget has changed & needs rebuilding
decoration: InputDecoration(
labelText: 'Name',
),
initialValue: name,
);
}
}
class FakeFutureDataSource {
static Future<String> getData() async {
return await Future.delayed(Duration(seconds: 2), () {
print('_fakeGetFuture() complete. Returning data...');
return 'Billy';
});
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.