如何使用List中的数据在Ffltter中打印Listview? [英] How to print listview in Flutter using data from List?
本文介绍了如何使用List中的数据在Ffltter中打印Listview?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个Steper表单,我正在使用它来接受用户的输入。有3个步骤,在每个步骤上,用户提供输入,并在单击保存按钮时将输入保存到列表中。现在,问题是,我可以在我的控制台上打印列表。但我不知道如何在按钮上方的屏幕上打印它,或者如果有任何字段为空,我想在按钮上方显示错误消息。有谁能帮帮我吗?我有以下代码。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Stepper Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Stepper Tutorial'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentStep = 0;
TextEditingController nameController = TextEditingController();
TextEditingController emailController = TextEditingController();
TextEditingController addressController = TextEditingController();
List<String> demoList = [];
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: Column(
children: <Widget>[
Stepper(
steps: _mySteps(),
currentStep: this._currentStep,
onStepTapped: (step) {
setState(
() {
this._currentStep = step;
},
);
},
onStepContinue: () {
setState(
() {
if (this._currentStep < this._mySteps().length - 1) {
this._currentStep = this._currentStep + 1;
} else {
//Logic to check if everything is completed
print('Completed, check fields.');
}
},
);
},
onStepCancel: () {
setState(
() {
if (this._currentStep > 0) {
this._currentStep = this._currentStep - 1;
} else {
this._currentStep = 0;
}
},
);
},
),
ElevatedButton(
onPressed: viewList,
child: Text("Click to see List"),
),
],
),
);
}
viewList() {
if (nameController.text.isEmpty ||
emailController.text.isEmpty ||
addressController.text.isEmpty) {
// //// Print Error message display in the screen above the button //
} else {
demoList.add(nameController.text);
demoList.add(emailController.text);
demoList.add(addressController.text);
}
print(demoList);
}
List<Step> _mySteps() {
List<Step> _steps = [
Step(
title: Text('Step 1'),
content: TextField(
controller: nameController,
),
isActive: _currentStep >= 0,
),
Step(
title: Text('Step 2'),
content: TextField(
controller: emailController,
),
isActive: _currentStep >= 1,
),
Step(
title: Text('Step 3'),
content: TextField(
controller: addressController,
),
isActive: _currentStep >= 2,
)
];
return _steps;
}
}
推荐答案
虽然我不确定该步骤是否可以完成,但我通常使用Form
WITHTextFormField
,其中您可以为表单添加validator
,以检查该值是否为空,并向用户发送一条消息。示例:
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text'; // the message which you alert the user that he needs to enter the value
}
return null;
},
keyboardType: TextInputType.text,
),
作为listView条件的一部分,您可以使用一些if/Switch案例或迭代器。在按钮上方放置一个小部件(ListView.builder
),就像前面提到的Use and If/Switch Case或迭代器,其中声明:
if (formIsEmpty){
//logic when the form is empty
} ? ListView.builder() : Cointainer()
那么,让我试着解释一下。起初,它会在按钮上方显示一个空容器或您喜欢的任何其他小部件,但当满足ListView.Builder的逻辑时,您就会触发Lisview,它会按照您的意愿显示列表。
这通常与登录表单一起使用,当您错过密码时,会显示一个链接以重置密码等。
bool _forgotPassword = false;
_forgotPassword
? TextButton(
onPressed: () async {
//await your logic for forgotton password
},
child: Text('Forgot Password'))
: Container(),
// ABOVE IS THE LOGIC FOR SHOWING THE WIDGET (IN YOUR CASE LISTVIEW.BUILDER) AFTER AN ACTION IS PERFORMED
TextButton(
onPressed: () async {
//await your login logic, if it returns falseerror
ot authenticated, then you can change the state of _forgotPassword, and then shows 'forgot password TextButton'
setState(() {
_forgotPassword = true;
});
},
child: Text('Login'))
这篇关于如何使用List中的数据在Ffltter中打印Listview?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文