Question

我在Future Builder中包含一个gridview，并且我想要这种渲染。正如可以看到，当选择的元素，所述颜色变化，图标和太明显我把它添加到一个集（仅具有单个元件）

标题来自称为的API。

所以我做了这样的事情：

FutureBuilder<List<ProjectTheme>> (
 future: themeColorList.buildTheme(),
 builder: (BuildContext context, AsyncSnapshot<List<ProjectTheme>> snapshot) {
   if(snapshot.hasData)
     return GridView.builder(
       itemCount: themes.length,
       gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
       itemBuilder: (BuildContext context, int index) {
         var theme = snapshot.data[index];
           return Stack(
              children: <Widget>[
                 Positioned(
                   child: ButtonTheme(
                   height: height * 0.15,
                   minWidth: width * 0.4,
                   child: RaisedButton(
                     shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(5.0)),
                        color: selectedThemes.contains(theme.themeName) ? theme.themeColor = Colors.grey : theme.themeColor = theme.themeColor,
                        onPressed: () {
                          setState(() {
                            changeOneClickItemState(theme);
                          });
                        },
                     ),
                   ),
                 ),
                 Padding(
                   child: Align(
                     alignment: Alignment.center,
                     child: selectedThemes.contains(theme.themeName)? Icon(Icons.check):theme.themeIcon,
                   )
                 ),
              ],
            );
          }
        );
      }
  )

selectedThemes只是我添加选择的列表。

这是onPressed按钮中调用的方法：

 void changeOneClickItemState(ProjectTheme theme) {
    pressed = !pressed;
    pressed ? selectedThemes.add(theme.themeName) : selectedThemes.remove(theme.themeName);
 }

因此它大致起作用，但是我需要在每个元素上轻击几次以查看所选的元素。似乎该应用程序没有反应，我认为这是因为花时间检查元素是否在列表中。事实是，我不能设置“按下？”而不是我的RaisedButton的color属性中的“ selectedTheme.contains（theme.themeName）”，因为我所有的按钮都变成了灰色。但是我需要使其更具反应性，因为客户端多次单击按钮以使其正常工作是不可接受的。

您对如何解决此问题有想法吗？

Answer 1

Sooooo，我终于找到了一种实现方法。正如我所说，问题在于gridView是在Future Builder内部构建的。

因此，我制作了一种构建主题的方法，并在init中对其进行了调用。

List<ProjectTheme> projectThemes;

void initState() {
  super.initState();
  getThemes();
  buildThemes();
}

Future<List<ProjectTheme>> buildThemes() async {
  List<ProjectTheme> projectThemeList = await themeColorList.buildTheme();
  setState(() {
    this.projectThemes = projectThemeList;
  });

  return projectThemeList;
}

然后，在类中添加属性“ isPressed”后，按如下所示构建网格视图：

GridView.builder(
  itemCount: themes != null ? themes.length : 0,
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (BuildContext context, int index) {
      var theme = projectThemes[index];
      theme.isPressed = false;

      return projectThemes != null ? Stack(
           children: <Widget>[
              Positioned(
                child: ButtonTheme(
                   height: height * 0.15,
                   minWidth: width * 0.4,
                   child: RaisedButton.icon(
                   shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(5.0)),

                   onPressed: () {
                     setState(() {
                       selectedThemes.contains(theme.themeName) ?
                       theme.isPressed = false :
                       theme.isPressed = true;

                       changeOneClickItemState(theme);
                     });
                   },
                   color: selectedThemes.contains(theme.themeName) ? Colors.grey : theme.themeColor,
                   icon: selectedThemes.contains(theme.themeName) ? Icon(Icons.check) : theme.themeIcon,
                   label: Text(''),
                 ),
                ),
              ),
            ],
          ) : Container(child: Center(child: CircularProgressIndicator()));
         }
       )

然后changeOneClickItemState：

 void changeOneClickItemState(ProjectTheme theme) {
   theme.isPressed ? 
   selectedThemes.add(theme.themeName) : 
   selectedThemes.remove(theme.themeName);
 }

也许有一天会帮助某人！

在以后的gridView中更改按钮的颜色和图标

1 个答案: