Question

我的基本意图是根据当前状态显示窗口小部件。假设，当用户单击按钮时，我使用setState()方法将currentPage的值设置为2。

onTabChangedListener: (position, title, color) {
       setState(() {
         currentPage = position;
...

当它是2时，我要显示以下窗口小部件，而不是当前显示的窗口小部件。我已经尝试过if/else个案例，但事实并非如此。我也已经解决了这个问题，但是我对执行情况不清楚。我了解有状态小部件的工作方式-只需一个与我的问题相似的代码示例即可。

// Widget I want to display when currentPage state is changed to 2.

  Widget _buildContent() {
    return Positioned(
      bottom: 50,
      left: 25,
      right: 25,
      child: Container(
        color: Theme.of(context).backgroundColor,
        child: Column(
          children: <Widget>[
//            _buildTextField("Some Text"),
            _buildLoginButton(),
            SizedBox(height: 20),
            RichText(
              text: TextSpan(
                text: "Some Text",
                style: TextStyle(
                  fontSize: 10.5,
                  fontWeight: FontWeight.w300,
                  letterSpacing: 1,
                ),
                children: [
                  TextSpan(
                    text: "Another Text",
                    style: TextStyle(
                      decoration: TextDecoration.underline,
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

注意：我当前代码的整页是available here

Answer 1

这是我在代码中使用的功能。使用Stack小部件将要显示的所有页面放在Offstage中。如果后台条件为真，则Offstage小部件将隐藏（使其变为“后台”）。

Stack(
          children: <Widget>[
            Offstage(
              offstage: 0 != _currentBottomBarIndex,
              child: PageOne(),
            ),
            Offstage(
              offstage: 1 != _currentBottomBarIndex,
              child: PageTwo(),
            ),
            Offstage(
              offstage: 2 != _currentBottomBarIndex,
              child: PageThree(),
            ),
            Offstage(
              offstage: 3 != _currentBottomBarIndex,
              child: PageFour(),
            ),
          ],
        ),

基于Flutter中的当前状态的显示小部件

1 个答案: