Question

我正在制作一个Flutter应用程序，在其中我需要进行图像中的设计

现在我正在做的是我将一个堆栈小部件作为主要部件，然后使用定位小部件放置在后退按钮上。现在屏幕的其余视图应位于scrollview中，因此我使用了SingleChildScrollView，但那是从顶部开始的从屏幕上，我通过将SingleChildScrollView放入容器中为它添加了上边距，但这并不能使视图可滚动。我是flutter开发的新手。请在代码中为我提供一些帮助，以使布局如图像中所示

https://i.imgur.com/hL8zvXr.jpg

Answer 1

尝试创建一个布局，为您提供类似于以下的小部件树：

Column
  Row
    CloseButton
  Text
  GridView
    Card
      Text
  Row
    Column
      Container
        Icon
      Text

请记住在“行”和“列”上设置mainAxisAlignment属性，以正确对齐小部件。同时查看容器上的装饰品。

此外，如果希望背景具有渐变，可以通过将整个物件包装在Container中并在Container的装饰属性中添加具有渐变的BoxDecoration来实现。

这只是对您的提示，但希望它可以帮助您入门。

Answer 2

对于这种菜单，您还可以在CustomScrollView内创建一个Silvergrid：

CustomScrollView(
    primary: false,
    slivers: <Widget>[
      SliverPadding(
        padding: const EdgeInsets.all(3.0),
        sliver: SliverGrid.count(
          mainAxisSpacing: 1, //horizontal space
          crossAxisSpacing: 1, //vertical space
          crossAxisCount: 2, //number of items a row
          children: <Widget>[
            MenuButton('dashboard', 'Manager', FontAwesomeIcons.tasks),
            MenuButton('supervisor', 'Supervisor', FontAwesomeIcons.mailchimp),
            MenuButton('ganttBoard', 'Project', FontAwesomeIcons.folder),
            MenuButton('manager', 'Calendar', FontAwesomeIcons.calendar),
            MenuButton('manager', 'BIM', FontAwesomeIcons.sign),
            MenuButton('manager', 'Notes', FontAwesomeIcons.stickyNote),
            MenuButton('manager', 'Documents', FontAwesomeIcons.dochub),
            MenuButton('manager', 'Assigments', FontAwesomeIcons.checkSquare)
          ],
        ),
      ),
    ],
  ),

您可以将“列表”作为子元素而不是这些按钮

如何使flutterview颤抖？

2 个答案: