[英]how to use listview with riverpod in flutter
我正在使用 flutter 和 flutter_riverpod 開發應用程序。 我想將 listview 與 Riverpod 一起使用。 但是我不知道怎么用。 我有一個文本字段的 onSubmitted 方法。 此方法適用於 texffield 文本的一些 dart 代碼。 我的目的是將單詞保存到listview。 我為此目的使用了flutter_riverpod,但我不知道如何為 stateprovider 或任何其他提供者使用列表。
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/material.dart';
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: SingleChildScrollView(child: ana1()),
),
),
);
}
}
final List<String> myList= [];
final StateProvider<int> _lengthProvider = StateProvider((ref) => 0);
class ana1 extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Container(
width: 1000,
height: 1000,
color: Colors.yellow,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 500,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Content Text',
),
onSubmitted: (inText) {
print(inText);
String gir = inText;
String myText = "$gir a";
var a = 0;
List<String> myList = [];
for (a = 0; a < myText.length; a++) {
if (myText.substring(a, a + 1) == " ") {
myList.add(myText.substring(0, a));
myText = myText.substring(a + 1, myText.length);
a = 0;
}
}
var b = 0;
String errorText = "?.; :-";
for (b = 0; b < myList.length; b++) {
String checkF = myList[b].substring(0, 1);
if (errorText.contains(checkF)) {
myList[b] =
myList[b].substring(1, myList[b].length);
}
String checkL = myList[b].substring(
myList[b].length - 1, myList[b].length);
if (errorText.contains(checkL)) {
myList[b] = myList[b]
.substring(0, myList[b].length - 1);
}
}
myList.add("$inText-${myList.length + 1}");
ref.read(_lengthProvider.state).state = myList.length;
},
)),
Container(
color: Colors.amberAccent,
width: 500,
child: ListView.builder(
itemCount: ref.watch(_lengthProvider.state).state,
itemBuilder: (BuildContext context, int index) {
return Text(myList[index]);
},
),
),
],
));
}
}
我正在簡化代碼片段以僅與 state 提供程序一起使用
final StateProvider<List<String>> itemsProvider = StateProvider((ref) => []);
class ana1 extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Container(
width: 400,
height: 300,
color: Colors.yellow,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Content Text',
),
onSubmitted: (inText) {
final sliptIntoWords = inText.split(
","); // Im separating words on , perform your logic here
final oldItems = ref.read(itemsProvider);
ref.read(itemsProvider.state).update(
(state) => [
...oldItems,
...sliptIntoWords,
],
);
},
)),
Expanded(
child: Container(
color: Colors.amberAccent,
child: ListView.builder(
itemCount: ref.watch(itemsProvider).length,
itemBuilder: (BuildContext context, int index) {
return Text(ref.watch(itemsProvider)[index]);
},
),
),
),
],
));
}
}
我認為在ListView
上使用 cosumer 會更好
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.