FlutterWebApp：Twitter提要之類的布局

我是 flutter 的新手，我正在開發一個網路應用程式（不是電話應用程式）。我正在嘗試在計算機（不是手機）上創建類似于 Twitter 的布局。它甚至類似于 stackoverflow 本身。您有三列：

第 1 列：左側是一些基本選單項

第 2 列：使用滾動提要居中和加寬

第 3 列：右側的框中有功能/其他有用的專案。

使用 flutter，我見過使用側邊選單的布局，但它們一直在左側。他們不堅持中間列。

我附上了一張一般骨架的圖片。我很想得到任何關于我從哪里開始的幫助。我看過 SafeArea、Container 等。但由于這是基本布局，我不確定這方面的最佳實踐是什么，我希望它是一個好的開始。即使我可以指向正確的方向，比如從這個小部件開始等。我會很感激。

uj5u.com熱心網友回復：

我會鼓勵計算寬度并根據它像以前一樣改變視口

 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 "),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }

標籤：扑 镖 网络应用程序 颤振布局 颤动网

上一篇：布林值的字串條件

下一篇：如何通過無狀態小部件子項傳遞GlobalKey