Row Flutter内的响应容器

Question

我目前正在学习长笛。我想创建这样的布局侧导航栏和上导航栏成一行布局

我已经创建了一个类HomeScreen，它将包含侧边栏和上栏的行。像这样：

@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
SideNav(),
RightContainer(),
],
),
);
}
}

然后，在side_nav.dart中，我创建了另一个类，如下所示：

@override
Widget build(BuildContext context) {
return Container(
width: 330,
//constraints: BoxConstraints.expand(),
color: kBlackColor,
child: Column(
children: <Widget>[
headerlogo,
],
),
);
}
}

然后，我为上部导航栏创建upper_nav.dart。

class UpperNav extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 950,
decoration: BoxDecoration(
color: kUpperNavbar,
//borderRadius: BorderRadius.circular(46),
boxShadow: [
BoxShadow(
offset: Offset(0, -2),
blurRadius: 20,
color: Colors.black.withOpacity(0.16),
),
],
),
child: LayoutBuilder(builder: (context, constraints) {
if (constraints.maxWidth > 955) {
return DesktopNavbar();
} else if (constraints.maxWidth > 600 && constraints.maxWidth < 955) {
return DesktopNavbar();
} else {
return MobileNavbar();
}
}),
);
}
}
class DesktopNavbar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
// constraints: BoxConstraints(maxWidth: 890),
child: Row(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(
width: 700,
height: 50,
),
Text(
'Docs',
style: TextStyle(
fontSize: 16,
color: Colors.black,
fontFamily: 'Segoe Ui',
decoration: TextDecoration.none,
),
),
SizedBox(
width: 50,
),
Text(
'Getting Started',
style: TextStyle(
fontSize: 16,
color: Colors.black,
fontFamily: 'Segoe Ui',
decoration: TextDecoration.none,
),
),
],
),
);
}
}
class MobileNavbar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}

我必须将宽度设置为950，以便上部导航条适合屏幕。我想知道，即使我改变了侧边栏的宽度并使其响应，我如何调整宽度以使其适合屏幕？如果有人能帮助我，我将不胜感激。谢谢！

Answer 1

我猜这个RightContainer是UpperNav？您可以使用Expanded小部件包装RightContainer((，以占用行中剩余的空间。然后我认为您不需要显式设置Container width，LayoutBuilder将根据剩余空间获得约束，因此您应该能够显示不同的布局。