如何将小部件对齐BottomNavigationBarItem？

2 回答

• 0

  你可以试试这个

  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();
    }
  }
  

  回复于 2024-05-20T16:12:53+08:00
• 1

  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

  回复于 2024-05-20T16:12:53+08:00