在我的代码中,我应该把BLoC构建器放在哪里,我可以拥有更多的BLoC吗?

我正在尝试学习BLoC模式,并将其应用到我的天气应用中。问题是,这个应用程序的用户界面有点大,有很多列和行,我不知道应该把BLoCuilder放在哪里。所以我很困惑,不知道该把BlocBuilder放在哪里,或者整个容器应该由一个BLoC事件返回?这基本上是应用的主屏幕,也是目前唯一的屏幕。

    class WeatherMainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: kBackgroundColor,
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(
                bottom: 30,
                top: 15,
                left: 30,
                right: 30,
              ),
              child: Column(
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(
                        'Today 28. apr',
                        style: TextStyle(
                          color: kAccentColor,
                          fontSize: 18,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          MenuSearchButton(
                            boxSize: 60,
                            onPressed: () => print('search pressed'),
                            content: Icon(
                              Icons.search,
                              color: Colors.white,
                              size: 30,
                            ),
                          ),
                          MenuSearchButton(
                            boxSize: 60,
                            onPressed: () => print('menu pressed'),
                            content: Icon(
                              Icons.menu,
                              color: Colors.white,
                              size: 30,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 20.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          '16',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 100,
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 10.0),
                          child: Row(
                            children: <Widget>[
                              Icon(
                                Icons.cloud,
                                color: Colors.white,
                                size: 25.0,
                              ),
                              SizedBox(width: 15.0),
                              Text(
                                'Raining',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(
                    bottom: 30,
                    top: 15,
                    left: 60,
                    right: 60,
                  ),
                  child: Text(
                    'Put on your coat, and don\'t forget the umbrella.',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 25,
                    ),
                  ),
                ),
                Divider(
                  color: kAccentColor,
                ),
                Container(
                  margin: EdgeInsets.only(
                    bottom: 30,
                    top: 15,
                    left: 30,
                    right: 30,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      DetailedCard(
                        header: 'HUMIDITY',
                        headerColor: kAccentColor,
                        text: '87%',
                        textColor: Colors.white,
                      ),
                      DetailedCard(
                        header: 'WIND M/S',
                        headerColor: kAccentColor,
                        text: '4,1',
                        textColor: Colors.white,
                      ),
                      DetailedCard(
                        header: 'FEELS LIKE',
                        headerColor: kAccentColor,
                        text: '18',
                        textColor: Colors.white,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

解决方案:

只是根据不同的可能状态来分离你的UI。然后使用 BlocBuilder 并检查状态。最后渲染相应状态的UI。

你可以检查 本视频

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/14091.html

(0)
上一篇 1天前
下一篇 1天前

相关推荐

发表评论

登录后才能评论