如何正确显示行内的未来？

Question

我正在尝试显示底部 BottomAppBar 图标的列表，但在此之前我已经针对成员身份进行了一些条件检查。

完整代码如下：https://dartpad.dev/82623d8d78149484eed5ae3be50dc297

我遇到的问题的一个片段（在构建小部件内部）：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: tabs[_currentIndex],
        bottomNavigationBar: BottomAppBar(
            shape: CircularNotchedRectangle(),
            color: Colors.red,
            child: Container(
              padding: EdgeInsets.only(left: 10.0, right: 10.0),
              height: 70,
              color: Colors.white,
              child: Row(
mainAxisAlignment: // Should return _spacing here, but can't because it is a future and await doesn't work., 
children: // Should return buildChildren() here, but can't because it is a future and await doesn't work.),
            )));
  }

Answer 1

您想使用 FutureBuilder 来实现此目的。在您的代码中进行以下更改：

更改 getMemberShip 函数：

Future<int> getMembership() async {
    // Your code
}

更改 buildChildren 函数：

List<IconButton> buildChildren(int level) {
var builder = [
   // Your code
];

if (level != 1) {
   // Your code
}
return builder;

}

更改_spacing函数：

_spacing(int level) {
   if (level != 1) {
     return MainAxisAlignment.spaceEvenly;
   } else {
     return MainAxisAlignment.spaceBetween;
   }
}

像这样实现你的构建方法：

@override
Widget build(BuildContext context) {
   return Scaffold(
     body: tabs[_currentIndex],
     bottomNavigationBar: BottomAppBar(
       shape: CircularNotchedRectangle(),
       color: Colors.red,
       child: Container(
         padding: EdgeInsets.only(left: 10.0, right: 10.0),
         height: 70,
         color: Colors.white,
         child: FutureBuilder(
           builder: (context, snapshot) {
             if (snapshot.hasData) {
               int level = snapshot.data;
               return Row(
                   mainAxisAlignment: _spacing(level),
                   children: buildChildren(level));
             } else if (snapshot.error) {
               return Text('Error occured');
             } else {
               return CircularProgressIndicator();
             }
           },
           future: getMembership(),
         ),
       ),
     ),
   );
}

如何正确显示行内的未来？

How to correctly display a future inside of a Row?

asynchronous

future

widget

dart

flutter