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

您可以尝试

Joi.alternatives().try()

Answer 2

import 'package:flutter/material.dart';
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  TabController tabController;
  int _index = 0;

  List<String> tabString = [
    'Discover',
    'Geners',
    'Artists'
  ];

  String _title = 'Discover';

  @override
  void initState() {
    super.initState();

    tabController = TabController(
      length: 3,
      vsync: this
    );
    this._index = 0;
    setState(() {
      this._title = tabString.first;
    });
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: (){},
          )
        ],
      ),
      body: new Container(
        color: const Color(0xffEEEEEE),
              child: TabBarView(
          children: <Widget>[
            Container(child:Text('1')),
            Container(child:Text('2')),
            Container(child:Text('3')),
          ],
          controller: tabController,
        ),
      ),

      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _index,
          onTap: (int _index) {
            setState(() {
              this._title = tabString[_index];
              this._index = _index;
              this.tabController.animateTo(_index);
            });
          },
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
              icon: new Icon(Icons.dashboard),
              title: new Text("Discover"),
            ),
            new BottomNavigationBarItem(
              icon: new Icon(Icons.surround_sound),
              title: new Text("Geners"),
            ),
            new BottomNavigationBarItem(
              icon: new Icon(Icons.account_circle),
              title: new Text("Artists"),
            ),

          ]),
    );
  }
}

在此处查看完整代码 https://github.com/santoshanand/flutter_movie

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

2 个答案: