如何设置我的初始标签使用价值通知Flutter？

2vuwiymt 于 2022-12-05 发布在 Flutter

关注(0)|答案(1)|浏览(106)

在我的bottom nav bar page中：

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({super.key, required this.currentScreen});

  /// Index Value⤵
  final ValueNotifier<int> currentScreen;
  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

我正在使用此小部件更改值：（这基本上是针对底部栏项目）

Widget bnbItems(String image, int index, double height, [double? pad]) {
    return InkWell(
      /// {Themed} ⬇ onTap Splash ⬇
      splashColor: Theme.of(context).brightness == Brightness.dark
          ? Colors.white.withOpacity(0.5)
          : Colors.pink.withOpacity(0.5),
      enableFeedback: true,

      /// ⬇ onTap Function ⬇
      onTap: () {
        currentScreen.value = index;
        _controller.animateTo(index / 4);
      },

      /// ⬇ Item Widget ⬇
      child: Container(
        alignment: Alignment.center,
        width: 50,
        height: 50,
        child: Padding(
          padding: EdgeInsets.only(top: pad ?? 5.0),
          child: Image.asset(
            image,
            height: height,
          ),
        ),
      ),
    );
  }
}

slide transition也依赖于它：

SlideTransition(
                position: Tween<Offset>(
                  begin: const Offset(-2, 0.0),
                  end: const Offset(2, 0.0),
                ).animate(
                  CurvedAnimation(
                    parent: _controller,
                    curve: Curves.linear,
                  ),
                ),
                child: ...

在我的home Page中，我有：

final ValueNotifier<int> currentScreen = ValueNotifier<int>(0);

我这样改变我的屏幕：

body: ValueListenableBuilder(
              valueListenable: currentScreen,
              builder: (context, value, child) => Stack(
                children: [
                  /// Screens⤵
                  screen[currentScreen.value],

                  /// ⬇ Bottom Nav Bar
                  Positioned(
                    bottom: 0,
                    child: BottomNavBar(currentScreen: currentScreen),
                  ),
                ],
              ),
            ),

即使我设置为ValueNotifier<int>(2)，幻灯片也不会出现在中间。为什么？有人能帮我写一些代码和解释吗？

flutter

来源：https://stackoverflow.com/questions/74592499/how-to-set-my-initial-tab-using-value-notifier-flutter

1条答案

按热度按时间

qcuzuvrc1#

你的currentScreen通知器i需要是全局的。或者只是在BottomNavBar上使用一个回调方法来接收tapped索引。
更新通知程序值，notifier.value= newValue
使用回调方法，它将

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({super.key, required this.currentScreen});

  /// Index Value⤵
  final Function(int) currentScreen;

并像widget.currentScreen(index)那样随时调用此方法。
现在，您将获得如下值

body: ValueListenableBuilder<int>(
              valueListenable: currentScreen,
              builder: (context, value, child) => Stack(
                children: [
                  /// Screens⤵
                  screen[value],

                  /// ⬇ Bottom Nav Bar
                  Positioned(
                    bottom: 0,
                    child: BottomNavBar(currentScreen: (tappedIndex){ 
                      currentScreen.value= tappedIndex; })
                  ),
                ],
              ),
            ),

valueNotifier的工作流程

void main() => runApp(
      MaterialApp(home: MyTabbedPage()),
    );

final ValueNotifier<int> currentScreen = ValueNotifier<int>(0);

class MyTabbedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AnotherWidget(),
          ValueListenableBuilder(
            valueListenable: currentScreen,
            builder: (context, value, child) {
              return Text(
                  "Screen no $value"); // you will use the value value to switch pages
            },
          ),
        ],
      ),
    );
  }
}

class AnotherWidget extends StatelessWidget {
  const AnotherWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: () {
            currentScreen.value = 100;
          },
          child: Text("Chnge to 100"),
        ),ElevatedButton(
          onPressed: () {
            currentScreen.value = 4;
          },
          child: Text("Chnge to 4"),
        ),
      ],
    );
  }
}

赞(0）回复(0）举报 2022-12-05

我来回答

如何设置我的初始标签使用价值通知Flutter？

1条答案

相关问题

热门标签

最新问答