当像 YouTube 一样被点击时，如何让我的底部导航栏一直向上？答案

【问题标题】：How can I make my bottom navigation bar to go all the way up when tapped like YouTube?当像 YouTube 一样被点击时，如何让我的底部导航栏一直向上？
【发布时间】：2021-06-02 17:54:41
【问题描述】：

我一直在制作社区颤振应用，目前正在开发底部导航栏。由于应用程序支持无限的帖子列表，我需要实现简单的方法来一直滚动到顶部，并且我想使用底部导航栏（当用户触摸底部标签栏的帖子图标时，它会滚动到顶部喜欢 YouTube）

这就是我需要的

我基本上想得到一个事件并用它来控制内部小部件。比如sample gif

这只是解释我想要的示例。如果我触摸底部导航栏的视频图标，我想将按钮的文本从“下一页”切换到“aaa”或其他内容。如您所见，获取一个事件并将其用于其他小部件是我现在的主要问题。使用底部选项卡的图标（发布图标）之一来控制许多页面，例如在特定页面的列表中或在主页上，同样的方式正是我正在寻找的！

我不会使用硬编码或静态，任何建议都会有所帮助。谢谢

【问题讨论】：

尝试添加一些代码或示例

标签： flutter

【解决方案1】：

我没有完全理解您的要求，但我认为这基本上就是您所需要的。如果您需要进一步说明，请告诉我。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final ScrollController _controller = ScrollController();

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Center(
        child: ListView(
          controller: _controller,
          children: List.generate(100, (int index) {
            return ListTile(
              title: Text('Item $index'),
            );
          }),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        selectedItemColor: Colors.amber[800],
        onTap: _onTap,
      ),
    );
  }

  void _onTap(int i) {
    _controller.animateTo(
      0,
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    );
  }
}

【讨论】：

【解决方案2】：

这是一个简单的例子。

enum Status  {video , defaulf}
class _MyHomePageState extends State<MyHomePage> {

Status status = Status.defaulf;
@override
Widget build(BuildContext context) {


return Scaffold(
  appBar: AppBar(
   

    actions: [
      IconButton(
          icon: Icon(Icons.video_collection), 
          onPressed: () {
            setState(() {
              status = Status.video;
            });
          }
      )
    ],
  ),
  body: Center(
    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: FlatButton(
      onPressed: (){
        print(status);
      },
      child: status == Status.defaulf
          ? Text("data")
          : Text("video"),
    )
  ),
  
);
}
}

您需要一个状态来指示要显示为文本的内容。您也可以更改按钮。应用栏的图标按钮，但我想这不是问题。

【讨论】：