dart - 如何在 BottomNavigationBarItem 上方对齐小部件？

Question

这就是我要实现的目标。

我尝试将 Stack 添加到我的底部导航栏项目，并在 Positioned 小部件中使用负值，但这不起作用，因为它在导航栏顶部。

这是我的 BottomNavigationBarItem 的代码。现在，我只使用一个红点来尝试将其置于按钮上方。

new BottomNavigationBarItem(
                    icon: new Stack(
                      overflow: Overflow.visible,
                        children: <Widget>[
                          new Icon(Icons.home),
                          new Positioned(  
                            top: -5.0,
                            right: 0.0,
                            child: new Icon(Icons.brightness_1, size: 8.0,
                                color: Colors.redAccent),
                          )
                        ]
                    ),
                    title: new Container(),
                    backgroundColor: Colors.white),

Answer 1

你可以试试这个

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  ValueNotifier<int> bottomNavNotifier = new ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      bottomNavigationBar: new Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new BottomNavHighlight(bottomNavNotifier),
          new BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.white,
            items: <BottomNavigationBarItem>[
              new BottomNavigationBarItem(icon: new Icon(Icons.create), title: new Text("Create")),
              new BottomNavigationBarItem(icon: new Icon(Icons.create), title: new Text("Create")),
              new BottomNavigationBarItem(icon: new Icon(Icons.create), title: new Text("Create")),
              new BottomNavigationBarItem(icon: new Icon(Icons.create), title: new Text("Create"))
            ],
            onTap: (int index){
              print(index);
              bottomNavNotifier.value = index;
            },
          )
        ],
      ),
      backgroundColor: Colors.white,// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class BottomNavHighlight extends StatefulWidget{

  final ValueNotifier<int> activeIndex;

  BottomNavHighlight(this.activeIndex);

  @override
  State createState() {
    return new _BottomNavHighlightState();
  }
}

class _BottomNavHighlightState extends State<BottomNavHighlight>{



  @override
  Widget build(BuildContext context) {
    List<Widget> items = <Widget>[
      new Expanded(child: new Container()),
      new Expanded(child: new Container()),
      new Expanded(child: new Container()),
    ];
    items.insert(
      widget.activeIndex.value,
      new Expanded(child: new Container(child: new Icon(Icons.play_circle_outline, size: 40.0,))),);
    return new Row(
      children: items,
    );
  }

  @override
  void initState() {
    super.initState();
    widget.activeIndex.addListener((){
      setState(() {
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    widget.activeIndex.dispose();
  }
}