首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在BottomNavigationBarItem上对齐小部件?

如何在BottomNavigationBarItem上对齐小部件?
EN

Stack Overflow用户
提问于 2018-07-11 06:31:34
回答 2查看 2.6K关注 0票数 1

这就是我正在努力实现的目标。

我尝试在底部的导航栏项目中添加一个Stack,并在Positioned小部件中使用负值,但由于导航栏顶部被切断,因此无法正常工作。

这是我的BottomNavigationBarItem的代码。现在我只用了一个红点来试着把它放在按钮上面。

代码语言:javascript
复制
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),
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-11 11:39:52

你可以试试这个

代码语言:javascript
复制
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();
  }
}
票数 4
EN

Stack Overflow用户

发布于 2018-07-11 09:28:05

代码语言:javascript
复制
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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51274777

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档