如何使用 Future String 更新文本小部件

Question

我在 Windows 上运行 Flutter。

我有一个带有默认文件夹标签的默认文件夹。启动程序后，单击按钮，选择不同的文件夹，然后我需要查看更新的文件夹标签以反映所选的新文件夹。目前，这不起作用。

这是我的代码：

import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue),home: const MyHomePage(),);
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with ChangeNotifier {
  String? myDirectory = 'C:/Users/Home/Desktop';

  Future<String> getFolder() async {
    String? myfolder='';
    myfolder == await FilePicker.platform.getDirectoryPath();
    return myfolder;
  }

  String? updateFolderLabel()  {
    String abc = '';
    getFolder().then((result){
      abc = result;
    });
    notifyListeners();
    return abc;
  }

  String? getFolderLabel()  {
   if (updateFolderLabel()!.isEmpty) return myDirectory;
   if (updateFolderLabel()!.isNotEmpty) return updateFolderLabel();
  }

  @override
  Widget build(BuildContext context) {
      Widget myfolderLabel = Text(getFolderLabel()!);
     Widget myButton = SizedBox(width: 200,height: 80,child: Row(mainAxisAlignment: MainAxisAlignment.center,mainAxisSize: MainAxisSize.min,children: [
            Expanded(child: TextButton(onPressed: updateFolderLabel,style: TextButton.styleFrom(backgroundColor: Colors.blue,side: BorderSide(width: 1.0)),child: Text("Open Folder",style: TextStyle(color: Colors.white))))]));
    return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Hello Flutter')),        resizeToAvoidBottomInset: true,
        body: LayoutBuilder(builder: (BuildContext ctx, BoxConstraints constraints){
         return Container(child: SingleChildScrollView(child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisSize: MainAxisSize.min, children: <Widget>[
           myfolderLabel,
           myButton,
        ])));
       })
      ));
  }
}

Answer 1

首先：要更新 UI，您必须使用

setState(() {});

功能。

其次：你没有正确实现这些功能，这是我的做法，并且它正在工作：

import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with ChangeNotifier {
  String myDirectory = 'C:/Users/Home/Desktop';

  Future<String?> getFolder() async {
    String? myFolder = '';
    myFolder = await FilePicker.platform.getDirectoryPath();
    //it was: ==  wich is wrong.
    return myFolder;
  }

  Future<String> updateFolderLabel() async {
    myDirectory = await getFolder() ?? 'C:/Users/Home/Desktop';
    notifyListeners();
    setState(() {}); // update the UI when we update the label
    return myDirectory;
  }

  String getFolderLabel() {
    /*if (updateFolderLabel().isEmpty) return myDirectory;
    if (updateFolderLabel().isNotEmpty) return getFolderLabel(); //here you were calling the function twice, which is inconvenient.
    */
    return myDirectory;
  }

  @override
  Widget build(BuildContext context) {
    Widget myFolderLabel = Text(myDirectory);
    Widget myButton = SizedBox(
        width: 200,
        height: 80,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                  child: TextButton(
                      onPressed: updateFolderLabel,
                      style: TextButton.styleFrom(
                          backgroundColor: Colors.blue, side: const BorderSide(width: 1.0)),
                      child: const Text("Open Folder", style: TextStyle(color: Colors.white))))
            ]));
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hello Flutter')),
        resizeToAvoidBottomInset: true,
        body: LayoutBuilder(
          builder: (BuildContext ctx, BoxConstraints constraints) {
            return SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  myFolderLabel,
                  myButton,
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

希望有帮助。