flutter中如何设计成如下的UI布局

Question

flutter中如何实现如图所示的UI设计

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要使用Flutter创建类似图1和图2的UI布局，你需要使用MaterialApp来构建一个主屏幕，并在其中嵌入你的界面。以下是一个简单的例子，它将创建一个包含所有组件的大屏幕。

首先，在你的main.dart文件中导入必要的库：

import 'package:flutter/material.dart';

然后，定义一个名为MyScreen的类，用于显示整个界面：

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello, World!'),
              Text('This is a sample app built with Flutter.'),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个包含标题、一个文本框和一个按钮的简单Scaffold。这个Scaffold的body是另一个Column，其中包含了两个子项：一个文本框（'Hello, World!'）和一个文本（'This is a sample app built with Flutter.'）。这些元素都位于中心位置。

接下来，我们需要为每个界面添加相应的布局。你可以通过继承StatefulWidget并重写其build方法来实现这一点。例如，我们可以为图1创建一个新的界面：

class NetworkInfoScreen extends StatefulWidget {
  @override
  _NetworkInfoScreenState createState() => _NetworkInfoScreenState();
}

class _NetworkInfoScreenState extends State<NetworkInfoScreen> {
  final _formKey = GlobalKey<FormState>();
  String _wifiName;
  String _password;

  void _onSubmit() {
    if (_formKey.currentState.validate()) {
      // Save the form data here...
      print('Wifi name: $wifiName');
      print('Password: $password');
    } else {
      print('Please fill in all fields!');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Info'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Wi-Fi Name'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Enter Wi-Fi name!';
                  }
                  return null;
                },
                onSaved: (value) => _wifiName = value,
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Enter password!';
                  }
                  return null;
                },
                onSaved: (value) => _password = value,
              ),
              RaisedButton(
                onPressed: _submit,
                child: Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _submit() {
    _formKey.currentState.save();

    setState(() {
      print('Submitting...');

      // Simulate saving the form data...

      // Optionally, you can display a message to the user indicating that the form has been submitted.
    });
  }
}

这个例子展示了如何在一个新的NetworkInfoScreen上创建一个表单。用户可以输入Wi-Fi名称和密码，并点击提交按钮以保存数据。注意，这里只是模拟了保存数据的操作，实际上你可能需要处理更复杂的逻辑，例如验证输入是否有效等。

最后，为了使所有界面在Android Studio中运行时看起来一致，你需要确保它们具有相同的宽度和高度。这可以通过在build_configurations部分中配置适当的width和height值来完成：

build_configurations:
  default:
    width: 375
    height: 812

这样，当你在Android Studio中运行项目时，所有界面都应该具有相同的大小。