flutter - 我应该在我的代码中的哪个位置放置 BLoC 构建器，我可以拥有更多它们吗？

Question

所以我正在尝试学习 BLoC 模式并将其应用于我的天气应用程序。问题是 UI 有点大，有很多列和行。所以我对在哪里放置 BlocBuilder 感到困惑。或者也许整个 Container 应该由一个 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,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

标签： flutter

Answer 1

只需根据不同的可能状态分离您的 UI。然后使用BlocBuilder并检查状态。最后为各自的状态渲染 UI。

你可以看看这个视频