[英]Flutter: Multiple material widgets
[,[enter image description here][1]][1]A little bit of a beginner question. [,[在此处输入图片描述][1]][1]一点点初学者问题。 but I have been messing with it for a long time and looking around without finding an answer.
但我已经把它弄乱了很长时间,环顾四周没有找到答案。
I am using Flutter framework and I am trying to run multiple Stateless widgets, a bottom navigation bar and a top appbar to hold menu and other navigation buttons.我正在使用 Flutter 框架,我正在尝试运行多个无状态小部件、底部导航栏和顶部应用栏来保存菜单和其他导航按钮。 I am struggling to get both running at once and I can not find a way to run them both.
我正在努力让两者同时运行,但我找不到同时运行它们的方法。 At the moment, when I call
home:MyBottomNavigationBar
only this appears and not the other(Makes sense) But what command or solution would help me run multiple widgets?目前,当我打电话给
home:MyBottomNavigationBar
时,只有这个出现而不是另一个(有道理)但是什么命令或解决方案可以帮助我运行多个小部件? I have tried tons of different ways to use home, but nothing seems to work.我尝试了很多不同的方式来使用 home,但似乎没有任何效果。 My code is very simple.
我的代码非常简单。 Just creating a Navigation bar and appbar with stf inside main.dart.
只需在 main.dart 中使用 stf 创建一个导航栏和应用栏。
If needed I can attach the code, but hopefully my question is clear enough.如果需要,我可以附上代码,但希望我的问题足够清楚。
Done In Xamarin, I can have both BottomNavBar and Couple of Nav buttons at the top easily.在 Xamarin 中完成,我可以轻松地在顶部同时拥有底部导航栏和导航按钮。 [1]: https://i.stack.imgur.com/Q2qXg.png
[1]: https://i.stack.imgur.com/Q2qXg.png
BottomNavBar.dart in Widgets folder Widgets 文件夹中的 BottomNavBar.dart
import 'dart:io'; class MyBottomNavigationBar extends StatefulWidget { @override MyBottomNavigationBarState createState() => MyBottomNavigationBarState(); } class MyBottomNavigationBarState extends State<MyBottomNavigationBar> { int _currentIndex = 0; final List <Widget> _children = [ HomePage(), ExplorePage(), ProgressPage(), ChallengesPage(), ProfilePage(), ]; void onTappedBar(int index) { setState((){ _currentIndex=index; }); } @override Widget build(BuildContext context) { return new Scaffold ( body: _children[_currentIndex], bottomNavigationBar: BottomNavigationBar ( onTap: onTappedBar, currentIndex: _currentIndex, items: [ BottomNavigationBarItem ( backgroundColor: Colors.pinkAccent, icon: new Icon(Icons.home, color: Colors.black), label: 'Feed', //activeBackgroundColor: Colors.red, // this is the change ),
main.dart main.dart
void main() async { WidgetsFlutterBinding.ensureInitialized(); runApp(MyApp()); } /// This is the main application widget. class MyApp extends StatelessWidget { static const String _title = 'Flutter Code Sample'; @override Widget build(BuildContext context) { MyBottomNavigationBar(); } return MaterialApp( title: _title, theme: ThemeData( primarySwatch: Colors.blue, ), home:HomePage() ); } }
And then I have a widget for a couple of buttons at the top appbar, but I can only run either BottomNavBar or The AppBar buttons.然后我在顶部应用栏有几个按钮的小部件,但我只能运行 BottomNavBar 或 AppBar 按钮。 I would like to have them both working at the same time.
我想让他们两个同时工作。
please put the code here, it would be helpful.请把代码放在这里,这会很有帮助。 I personally didn't understand what you're trying to achieve.
我个人不明白你想要达到什么目的。 every stateless/stateful has one build method which returns a widget (that has its own build method).
每个无状态/有状态都有一个构建方法,该方法返回一个小部件(具有自己的构建方法)。 However, as some widgets can have more than one child (row,column,stack), you can use your pre-built layout composition and then mount it to the widget tree.
但是,由于某些小部件可以有多个子项(行、列、堆栈),您可以使用预先构建的布局组合,然后将其挂载到小部件树。 Or, simply use your custom layout by extending CustomMultiChildLayout, you can also use "Overlay"-ing, to paint directly on the canvas based on an event or a state.
或者,只需通过扩展 CustomMultiChildLayout 来使用您的自定义布局,您也可以使用“Overlay”-ing,根据事件或 state 直接在 canvas 上绘制。 ||||||||||||
|||||||||||||
I tried to reproduced the image, basically you need to use scaffold's appBar and bottomNavigationBar properties.我试图重现图像,基本上你需要使用脚手架的 appBar 和 bottomNavigationBar 属性。 appbar is extending PreferredSizedWidget so you can easily create your own.
appbar 正在扩展 PreferredSizedWidget,因此您可以轻松创建自己的。
main.dart main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
MyBottomNavigationBar();
return MaterialApp(
title: _title,
home: HomePage(),
);
}
}
home_page.dart home_page.dart
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter version"),
actions: [
IconButton(icon: Icon(Icons.menu), onPressed: () {}),
IconButton(icon: Icon(Icons.account_circle), onPressed: () {}),
],
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blue,
items: [
BottomNavigationBarItem(
backgroundColor: Colors.pinkAccent,
icon: new Icon(Icons.home, color: Colors.black),
label: 'Feed',
//activeBackgroundColor: Colors.red, // this is the change
),
BottomNavigationBarItem(
backgroundColor: Colors.pinkAccent,
icon: new Icon(Icons.home, color: Colors.black),
label: 'Feed',
//activeBackgroundColor: Colors.red, // this is the change
),
],
),
body: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/7,
color: Colors.blue,
child: Center(child: Text("Challenges Page",style: TextStyle(fontSize: 41,color: Colors.white),),),
),
],
),
);
}
}
assuming you want to create your layout from scratch and don't want to use the scaffold's properties.假设您想从头开始创建布局并且不想使用脚手架的属性。 the code blow is the same layout with stack, I didn't make it beautiful though, it just shows the layout without refactoring any widget.
代码打击是与堆栈相同的布局,但我没有让它漂亮,它只是显示布局而不重构任何小部件。
code for home_page.dart (main.dart is the same as above) home_page.dart的代码(main.dart同上)
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/12,
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(color: Colors.black54,blurRadius: 2,spreadRadius: .1,offset: Offset(0, 2)),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(18.0),
child: Text("just stack",style: TextStyle(fontSize: 21,color: Colors.white),),
),
],
),
Row(
children: [
IconButton(icon: Icon(Icons.account_circle,size: 32,), onPressed: (){}),IconButton(icon: Icon(Icons.settings,size: 32,), onPressed: (){}),
],
),
],
),
),
Positioned(
top: MediaQuery.of(context).size.height/12+1,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/10,
color: Colors.blue,
child: Center(child: Text("Challenges Page",style: TextStyle(fontSize: 31,color: Colors.white),)),
),
),
Positioned(
bottom:0,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/12,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
IconButton(icon: Icon(Icons.home,size: 32,), onPressed: (){}),
Text("home"),
],
),
IconButton(icon: Icon(Icons.account_circle,size: 32,), onPressed: (){}),
IconButton(icon: Icon(Icons.settings,size: 32,), onPressed: (){}),
],
),
),
),
],
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.