Question

我正在Flutter中使用Cards，并且在点击Card时，希望进度指示器在左下角位置持续2秒钟，以便成功加载另一页面。有人知道如何添加吗？

 Container(
           height: 130,
           child: Card(
             child: Row(
               children: <Widget>[
                 Expanded(
                   child: ListTile(
                       title: Text(
                         'My card Location',
                         style: TextStyle(
                             fontSize: 15, fontWeight: FontWeight.w700),
                       ),

                       leading: Icon(Icons.setting),
                       // color: Colors.blueAccent, size: mediumIconSize),
                       trailing: Icon(Icons.keyboard_arrow_right),
                       selected: true,

                       onTap: () async {

                    //   I try this one but not working
                         //  Flushbar(
                    // 
                       //    showProgressIndicator: true,
                       //    duration:  Duration(seconds: 2),
                       //  );
               getDetails().then((myCardlocations) {
                 Navigator
                     .of(context)
                     .pushNamed('/myCardlocations',
                     arguments: ObjectLocations(locations, 'myCardlocations'));
               }
               );
                       }
                      
                  
                   ),
                 ),
               ],
             ),
           ),
         ),

Answer 1

您可以使用Stack和CircularProgressIndicator做类似的事情。

class _MyWidgetState extends State<MyWidget> {
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 130,
      child: Stack(
        children: [
          Container(
            height: 130,
            child: Card(
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: ListTile(
                      title: Text(
                        'My card Location',
                        style: TextStyle(
                            fontSize: 15, fontWeight: FontWeight.w700),
                      ),
                      leading: Icon(Icons.settings),
                      // color: Colors.blueAccent, size: mediumIconSize),
                      trailing: Icon(Icons.keyboard_arrow_right),
                      selected: true,
                      onTap: () async {
                        
                        setState(() {
                          isLoading = true;
                        });

                        getDetails().then((myCardLocations) {
                          setState(() {
                            isLoading = false;
                          });
                          // navigation code here
                        });

                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: isLoading
                ? Padding(
                  padding: EdgeInsets.fromLTRB(15,0,0,15),
                  child: SizedBox(
                      width: 20,
                      height: 20,
                      child: CircularProgressIndicator(),
                    ),
                )
                : SizedBox(),
          ),
        ],
      ),
    );
  }

}

编辑：

好像我误解了这个问题。具体来说，是显示进度指示器的位置。无论如何，如果您有想法，可以根据需要将指标放置在其他位置。

Answer 2

1。。您需要为GlobalKey定义一个Scaffold，以便可以使用SnackBar（可以定义GloablKey在页面的State中。

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

2。。您需要设置Scaffold的密钥。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
...

3。。您需要将Card用GestureDetector包装，并将onTap函数设置为调用showLoading，该函数将显示{{ 1}}。在SnackBar中调用getDetails函数。完整代码（define key步骤除外）：

showLoading

注意：您还可以设置void _showLoading() { _scaffoldKey.currentState.showSnackBar(new SnackBar( duration: new Duration(seconds: 2), content: new Row( children: <Widget>[ new CircularProgressIndicator(), new Text("Loading...") ], ), )); // call to your getDetails and its steps should be here } @override Widget build(BuildContext context) { return Scaffold( key: _scaffoldKey, appBar: AppBar( title: Text("My app"), ), body: Center( child: GestureDetector( child: Card( child: Row(children: <Widget>[ Expanded( child: ListTile( title: Text( 'My card Location', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700), ), leading: Icon(Icons.settings), // color: Colors.blueAccent, size: mediumIconSize), trailing: Icon(Icons.keyboard_arrow_right), selected: true, )), ])), onTap: () => _showLoading(), )), ); } }的样式。

结果：

Answer 3

有些事情，我想在给出实际答案之前先提及。

阅读有关Flutter.delayed constructor的知识，这非常有用，它可以使事件等待一段时间并通过提供Duration来进行操作。在这段时间之后，无论您想做什么，都会在callback函数中实现

Future.delayed(Duration(seconds: your_time, (){
   //it will perform this operation after that much of seconds
}));

您始终可以使用Widget显示/隐藏bool value，并进行相应的更改
使用一列，并在Widget的末尾添加LinearProgressIndicator。根据数据显示/隐藏它
此外，使用MediaQuery给出高度。根据所有电话尺寸给出尺寸的更有效方法。就像match-parent中的Android Studio。进行相应的数学计算，我也在代码中显示了

Column(
  children: [
    Row(),
    bool val ? LinearProgressIndicator() : Container() // Container() is nothing but an empty widget which shows nothing
  ]
)

有些提示：我没有使用getData，因为它的定义不正确，但是您可以将其称为in函数，我将在代码中为您显示，即{ {1}}。跟随评论，您一切顺利

pageTransit()

结果

看class _MyHomePageState extends State<MyHomePage> { // this takes care of the show/hide of your progress indicator bool _showProgress = false; // this takes care of the operation void pageTransit(){ // first show when the ListTile is clicked setState(() => _showProgress = true); Future.delayed(Duration(seconds: 2), (){ // hide it after 2 seconds setState(() => _showProgress = false); // do the page trnasition here //getDetails().then((myCardlocations) { //Navigator.of(context).pushNamed('/myCardlocations', //arguments: ObjectLocations(locations, 'myCardlocations')); //} }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Container( height: MediaQuery.of(context).size.height * 0.1, child: Card( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // use your items here, based upon the bool value show hide your // progress indicator Row( children: <Widget>[ Expanded( child: ListTile( title: Text( 'My card Location', style: TextStyle( fontSize: 15, fontWeight: FontWeight.w700), ), leading: Icon(Icons.settings), // color: Colors.blueAccent, size: mediumIconSize), trailing: Icon(Icons.keyboard_arrow_right), selected: true, onTap: () => pageTransit() ) ) ] ), // show/hide in the card _showProgress ? LinearProgressIndicator() : Container() ] ) ) ) ); } }，它停留在那里2秒钟，然后消失

在Flutter中点击时如何在卡片上添加进度指示器？

3 个答案: