Flutter Web App：类似 Twitter 的布局

Posted 2023-02-23

【中文标题】Flutter Web App：类似 Twitter 的布局

【英文标题】：Flutter Web App: Twitter feed like layout

【发布时间】：2022-01-06 02:56:58

【问题描述】：

我是 Flutter 的新手，我正在开发一个网络应用程序（不是一个电话应用程序）。我正在尝试在计算机（不是电话）上创建类似于 Twitter 的布局。它甚至类似于 *** 本身。您有三列：

第 1 列：左侧是一些基本菜单项

第 2 列：居中且更宽，带有滚动提要

第 3 列：右侧的方框中包含功能/其他有用的项目。

使用颤振，我已经看到使用侧边菜单的布局，但它们一直在左侧。他们不坚持中间列。

我附上了一张一般骨架的图片。我很想得到任何关于我从哪里开始的帮助。我看过 SafeArea、Container 等。但由于这是基本布局，我不确定最佳实践是什么，我希望这是一个好的开始。即使我可以指出正确的方向，比如从这个小部件开始等等。我会很感激的。

【参考方案1】：

我会鼓励计算宽度并根据它更改视口like I used to

 Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.deepOrange, // for  screen background
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) 
            final maxWidth = constraints.maxWidth;

            return SizedBox(
              width: maxWidth * .8, //max viewPort
              child: Row(
                children: [
                  Container(
                    width: maxWidth * .2, //left part
                    color: Colors.blue,
                    child: Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.start, // for alignment
                      children: [
                        ...List.generate(
                          8,
                          (index) => SizedBox(
                            height: 40,
                            child: Text("menu item $index "),
                          ),
                        )
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(
                        color: Colors.pinkAccent,
                        child: CustomScrollView(
                          slivers: [
                            SliverList(
                              // prefer builder
                              delegate: SliverChildListDelegate(
                                [
                                  ...List.generate(
                                    44,
                                    (index) => SizedBox(
                                      height: 100,
                                      child: Text("Body Element $index "),
                                    ),
                                  )
                                ],
                              ),
                            )
                          ],
                        )),
                  ),
                  Container(
                    width: maxWidth * .2, //right part features
                    color: Colors.deepPurple,
                    child: Column(
                      children: [
                        ...List.generate(
                          4,
                          (index) => SizedBox(
                            height: 40,
                            child: Text("features item $index "),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            );
          ,
        ),
      ),
    );
  

【讨论】：

所以基本上你使用 SizedBox 来分配“可绘制区域”和 LayoutBuilder，它给出了窗口的大小？那么如果我改变窗口的大小，我应该可以改变布局？

还有你所说的评论“更喜欢滚动小部件中的构建器”是什么意思？

是的，使用SizedBox来分配“可绘制区域”并且首选SliverChildBuilderDelegate

非常感谢！尝试了您的构建方法，它似乎给了我开始的布局。非常感谢！

嘿，我在使用滚动视图时确实遇到了异常 - 引发了另一个异常：提供的 ScrollController 当前附加到多个 ScrollPosition 对此有什么想法吗？