Flutter：我将使用哪些小部件来创建此屏幕？

Question

我对Flutter感到非常困惑。 我7年前为Windows Phone创建了一个具有以下屏幕的应用程序：

谁能告诉我用Flutter创建此屏幕时使用的布局小部件（甚至是什么顺序？）？

我计划使用Flutter Studio设计和生成代码。 希望能帮助我掌握。

Answer 1

这是我的实现形式：

和代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
      theme: ThemeData(
        primaryColor: Colors.white,
        brightness: Brightness.light,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 5,
                child: Container(
                  color: Colors.white,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(16),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              'Cool Storage',
                              style: TextStyle(fontSize: 24),
                            ),
                            Text(
                              'Databases',
                              style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(16),
                        child: Icon(
                          Icons.storage,
                          size: 56,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                  flex: 16,
                  child: ListView.separated(
                    padding: const EdgeInsets.all(0.0),
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        height: 80,
                        child: Padding(
                          padding: const EdgeInsets.all(8),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Column(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Text(
                                    'Records',
                                    style: TextStyle(fontSize: 20),
                                  ),
                                  Text(
                                    '#',
                                    style: TextStyle(fontSize: 32),
                                  ),
                                ],
                              ),
                              Column(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Text(
                                    'Category Name',
                                    style: TextStyle(fontSize: 24, color: Colors.blue[800]),
                                  ),
                                  Text(
                                    'Date Modified: 01/01/1970',
                                    style: TextStyle(fontSize: 14),
                                  ),
                                ],
                              ),
                              Icon(
                                Icons.arrow_right,
                                color: Colors.blue[800],
                                size: 56,
                              )
                            ],
                          ),
                        ),
                      );
                    },
                    separatorBuilder: (BuildContext context, int index) {
                      return Container(
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(color: Colors.grey[300]),
                          ),
                        ),
                      );
                    },
                    itemCount: 20,
                  )),
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.black,
                  width: double.infinity,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'Grants for You',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24,
                        ),
                      ),
                      Text(
                        'USAFundingApplications.org',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Stack(children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(Icons.add_circle_outline),
                  onPressed: () {},
                ),
                IconButton(
                  icon: Icon(Icons.cloud),
                  onPressed: () {},
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                IconButton(
                  icon: Icon(Icons.more_horiz),
                  onPressed: () {},
                ),
              ],
            ),
          ]),
        ),
      ),
    );
  }
}

显然，您将需要动态填充ListView，使用填充进行播放，为OneDrive图标导入Font Awesome，使用auto_size_text包来确保文本在大多数设备上都能正常缩放（此屏幕截图来自Nexus 5；字体看起来太多了）在Pixel XL上较小），也许可以用适当的AppBar等替换当前标头，但这足以让您入门