Question

我对Flutter还是很陌生，而我来自使用Angular框架。目前，我正在尝试使用Flutter使用以下Flutter嵌入项目制作桌面应用程序：https://github.com/Drakirus/go-flutter-desktop-embedder。

我想知道是否有人可以向我解释实现以下目标的最佳方法：

黑框代表整个应用程序。

红色框代表自定义菜单。

绿色框代表页面的内容。

我如何在绿色区域内的“小部件”之间进行路由而不更改持有应用程序的小部件？

我希望有个方向。

Answer 1

我是菜鸟，所以请随便吃点盐。我知道两种浏览小部件的方法，您可以在此处找到它们 https://flutter.io/docs/development/ui/navigation 我相信我能理解的主要区别是，如果您想是否将数据发送到新的“路线”（命名的路线方式不能，至少我知道）；

表示，因此您可以保留主“屏幕”并更改红色和绿色小部件使用包含它们的小部件的状态

示例

class BlackWidget extends StatefulWidget 
bla bla bla => BlackWidgetState();

class BlackWidget extend State<BlackWidget>

Widget tallWidget = GreenWidget();
Widget bigWidget = RedWidget();
return
container, column.. etc
Row(
children:[tallWidget,bigWidget
])
button onTap => tallWidget = YellowWidget();
}

GreenWidget... bla bla bla...
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => RedWidget()),
  );
}

很抱歉，“ bla bla”（底部）部分位于底部，刚刚添加了“黄色”小部件以强调您可以实际将“绿色小部件”替换为您想要的任何内容

希望我能提供更多帮助，然后让您感到困惑

Answer 2

我正在贡献Drakirus的go-flutter插件。
该项目已移至https://github.com/go-flutter-desktop

您提出的问题可以使用package_active_scaffold
https://pub.dev/packages/responsive_scaffold
或
您可以参考此文档https://iirokrankka.com/2018/01/28/implementing-adaptive-master-detail-layouts/
基本上，有两种不同的布局，有关详细信息，请参见注释

class _MasterDetailContainerState extends State<MasterDetailContainer> {
  // Track the currently selected item here. Only used for
  // tablet layouts.
  Item _selectedItem;

  Widget _buildMobileLayout() {
    return ItemListing(
      // Since we're on mobile, just push a new route for the
      // item details.
      itemSelectedCallback: (item) {
        Navigator.push(...);
      },
    );
  }

  Widget _buildTabletLayout() {
    // For tablets, return a layout that has item listing on the left
    // and item details on the right.
    return Row(
      children: <Widget>[
        Flexible(
          flex: 1, 
          child: ItemListing(
            // Instead of pushing a new route here, we update
            // the currently selected item, which is a part of
            // our state now.
            itemSelectedCallback: (item) {
              setState(() {
                _selectedItem = item;
              });
            },
          ),
        ),
        Flexible(
          flex: 3,
          child: ItemDetails(
            // The item details just blindly accepts whichever
            // item we throw in its way, just like before.
            item: _selectedItem,
          ),
        ),
      ],
    );
  }

对于软件包响应式支架
在线演示https://fluttercommunity.github.io/responsive_scaffold/#/
github https://github.com/fluttercommunity/responsive_scaffold/

更多用于布局的模板代码段
https://github.com/fluttercommunity/responsive_scaffold/tree/dev

更多图片和演示可以在此处找到https://github.com/fluttercommunity/responsive_scaffold/tree/dev/lib/templates/3-column
代码段1

import 'package:flutter/material.dart';

import 'package:responsive_scaffold/responsive_scaffold.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveListScaffold.builder(
        scaffoldKey: _scaffoldKey,
        detailBuilder: (BuildContext context, int index, bool tablet) {
          return DetailsScreen(
            // appBar: AppBar(
            //   elevation: 0.0,
            //   title: Text("Details"),
            //   actions: [
            //     IconButton(
            //       icon: Icon(Icons.share),
            //       onPressed: () {},
            //     ),
            //     IconButton(
            //       icon: Icon(Icons.delete),
            //       onPressed: () {
            //         if (!tablet) Navigator.of(context).pop();
            //       },
            //     ),
            //   ],
            // ),
            body: Scaffold(
              appBar: AppBar(
                elevation: 0.0,
                title: Text("Details"),
                automaticallyImplyLeading: !tablet,
                actions: [
                  IconButton(
                    icon: Icon(Icons.share),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () {
                      if (!tablet) Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
              bottomNavigationBar: BottomAppBar(
                elevation: 0.0,
                child: Container(
                  child: IconButton(
                    icon: Icon(Icons.share),
                    onPressed: () {},
                  ),
                ),
              ),
              body: Container(
                child: Center(
                  child: Text("Item: $index"),
                ),
              ),
            ),
          );
        },
        nullItems: Center(child: CircularProgressIndicator()),
        emptyItems: Center(child: Text("No Items Found")),
        slivers: <Widget>[
          SliverAppBar(
            title: Text("App Bar"),
          ),
        ],
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Text(index.toString()),
          );
        },
        bottomNavigationBar: BottomAppBar(
          elevation: 0.0,
          child: Container(
            child: IconButton(
              icon: Icon(Icons.share),
              onPressed: () {},
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            _scaffoldKey.currentState.showSnackBar(SnackBar(
              content: Text("Snackbar!"),
            ));
          },
        ),
      ),
    );
  }
}

代码段2

import 'package:flutter/material.dart';
import 'package:responsive_scaffold/responsive_scaffold.dart';

class MultiColumnNavigationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThreeColumnNavigation(
      title: Text('Mailboxes'),
      showDetailsArrows: true,
      backgroundColor: Colors.grey[100],
      bottomAppBar: BottomAppBar(
        elevation: 1,
        child: Row(
          children: <Widget>[
            IconButton(
              icon: Icon(
                Icons.filter_list,
                color: Colors.transparent,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),
      sections: [
        MainSection(
          label: Text('All Inboxes'),
          icon: Icon(Icons.mail),
          itemCount: 100,
          itemBuilder: (context, index, selected) {
            return ListTile(
              leading: CircleAvatar(
                child: Text(index.toString()),
              ),
              selected: selected,
              title: Text('Primary Information'),
              subtitle: Text('Here are some details about the item'),
            );
          },
          bottomAppBar: BottomAppBar(
            elevation: 1,
            child: Row(
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.filter_list),
                  onPressed: () {},
                ),
              ],
            ),
          ),
          getDetails: (context, index) {
            return DetailsWidget(
              title: Text('Details'),
              child: Center(
                child: Text(
                  index.toString(),
                ),
              ),
            );
          },
        ),
        MainSection(
          label: Text('Sent Mail'),
          icon: Icon(Icons.send),
          itemCount: 100,
          itemBuilder: (context, index, selected) {
            return ListTile(
              leading: CircleAvatar(
                child: Text(index.toString()),
              ),
              selected: selected,
              title: Text('Secondary Information'),
              subtitle: Text('Here are some details about the item'),
            );
          },
          getDetails: (context, index) {
            return DetailsWidget(
              title: Text('Details'),
              actions: [
                IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () {},
                ),
              ],
              child: Center(
                child: Text(
                  index.toString(),
                ),
              ),
            );
          },
        ),
      ],
    );
  }
}

Flutter菜单和导航

2 个答案: