Row Flutter 内的响应式容器答案

【问题标题】：Responsive Container inside Row FlutterRow Flutter 内的响应式容器
【发布时间】：2021-07-14 08:25:09
【问题描述】：

我目前正在尝试学习 Flutter。我想创建这样的布局 Layout with side navigation bar and upper navigation bar in a row

我创建了一个 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，以便上部导航栏适合屏幕。我想知道如何调整宽度以使其适合屏幕，即使我更改了侧边栏的宽度并使其响应？感谢是否有人可以帮助我。谢谢！

【问题讨论】：

标签： flutter flutter-layout flutter-web

【解决方案1】：

我猜这个 RightContainer 是 UpperNav？您可以使用 Expanded 小部件包装 RightContainer()，以占用 Row 中剩余的空间。那么我认为你不需要显式设置容器宽度，并且 LayoutBuilder 会根据剩余空间得到约束，因此你应该能够显示不同的布局。

【讨论】：