这就是我正在努力实现的目标。
我尝试在底部的导航栏项目中添加一个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),
发布于 2018-07-11 11:39:52
你可以试试这个
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();
}
}
发布于 2018-07-11 09:28:05
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://stackoverflow.com/questions/51274777
复制相似问题