这几天我开始学习Flutter,我顺利地制作了这个教程的应用程序。
我设法创建了一个按钮,从列表和卡片可视化切换,一个图标,删除了一个词,而不是显示无限的话,现在只显示20个词。但现在我想创建另一个屏幕通过命名路线,在这个屏幕上,你可以编辑你在screen1点击的名称,例如:
但是我在尝试做这件事时遇到了很多麻烦。我设法创建了screen2、textform和route,但是更改名称的部分仍然让我有点头疼。
有人能帮帮我吗?这是密码:
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Names',
initialRoute: '/',
routes: {
'/': (context) => const RandomWords(),
EditScreen.routeName: (context) => EditScreen(),
},
);
}
}
class RandomWords extends StatefulWidget {
const RandomWords({super.key});
@override
State<RandomWords> createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _saved = <WordPair>{};
final _biggerFont = const TextStyle(fontSize: 20);
String selected = '';
bool isList = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Startup Names'),
actions: [
IconButton(
icon: const Icon(Icons.bookmark_border_sharp),
onPressed: _pushSaved,
tooltip: 'Favorites',
),
IconButton(
icon:
isList ? const Icon(Icons.grid_view) : const Icon(Icons.list),
onPressed: () {
setState(() {
isList = !isList;
});
},
tooltip: isList ? 'Card mode' : 'List mode',
),
],
),
body: isList ? lista() : cards());
}
Widget lista() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemCount: 40,
itemBuilder: (context, i) {
if (i.isOdd) return const Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return favorites(_suggestions[index], index);
},
);
}
Widget cards() {
return GridView.builder(
padding: const EdgeInsets.all(16.0),
itemCount: 20,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
mainAxisExtent: 100),
itemBuilder: (context, i) {
if (i >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return Card(child: favorites(_suggestions[i], i));
});
}
Widget favorites(WordPair pair, int index) {
final alreadySaved = _saved.contains(pair);
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(alreadySaved ? Icons.favorite : Icons.favorite_border),
color: alreadySaved ? Colors.red : null,
tooltip: alreadySaved ? 'Remove favorite' : 'Favorite',
onPressed: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
),
IconButton(
icon: const Icon(Icons.delete),
color: Colors.black87,
tooltip: 'Remove from list',
onPressed: () {
setState(() {
_suggestions.remove(pair);
_saved.remove(pair);
});
},
),
],
),
onTap: () {
selected = pair.asPascalCase;
Navigator.pushNamed(context, '/second',
arguments: Argumentos(index, selected));
});
}
void _pushSaved() {
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (context) {
final tiles = _saved.map(
(pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = tiles.isNotEmpty
? ListTile.divideTiles(
context: context,
tiles: tiles,
).toList()
: <Widget>[];
return Scaffold(
appBar: AppBar(
title: const Text('Favorites'),
),
body: ListView(children: divided),
);
},
),
);
}
}
class EditScreen extends StatefulWidget {
static const routeName = '/second';
const EditScreen({super.key});
@override
State<EditScreen> createState() => _EditScreenState();
}
class _EditScreenState extends State<EditScreen> {
final first = TextEditingController();
final second = TextEditingController();
@override
Widget build(BuildContext context) {
final argumentos = ModalRoute.of(context)?.settings.arguments as Argumentos;
String selected = argumentos.name;
return Scaffold(
appBar: AppBar(
title: Text('Edit word'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text("What's the new name?",
style: TextStyle(fontSize: 30)),
const SizedBox(height: 30),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 100, vertical: 16),
child: TextFormField(
controller: first,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'First part of the name',
),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 100, vertical: 16),
child: TextFormField(
controller: second,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Second part of the name',
),
),
),
const SizedBox(height: 20),
ElevatedButton(
child: const Text('Change it'),
onPressed: () {
selected = (WordPair(first.text, second.text)).toString();
Navigator.pushNamed(context, '/');
},
),
],
),
));
}
}
class Argumentos {
final int id;
final String name;
Argumentos(this.id, this.name);
}
1条答案
按热度按时间dojqjjoe1#
您可以使用. then()和update value。
失效日期:
则():https://api.flutter.dev/flutter/dart-async/Future/then.html