Question

我有点扑朔迷离。在我的日志记录组件中，我想将UI的下半部分分为4个部分，如下图所示

到目前为止，我已经实现了登录按钮。我不明白的是如何将其余的UI分开，如图所示。分离后，我应该能够向每个分离的单元格添加图像。

我该如何实现？谢谢您的帮助！

我的实施，直到登录按钮：-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:bank_app/screens/AccountSummary.dart';

class Login extends StatelessWidget{

  Widget _inputField(String title, Color border) {
    return TextField(
      decoration: InputDecoration(
        hintText: title,
        hintStyle: TextStyle(color: border),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        border: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
      ),
    );
  }

  Widget _buttons(name, BuildContext context){
    return Center(
        child: ButtonBar(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ButtonTheme(
                minWidth: 200,
                child:RaisedButton(
                  child: new Text(name),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100),
                      side: BorderSide(color: Colors.white)
                  ),
                  color: Colors.white,
                  textColor: Colors.red,
                  onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => AccountSummary()));},
                )
            ),
          ],
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: Colors.red,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Image.asset("assets/logo.png", fit: BoxFit.cover, ),
            centerTitle: true,
          ),
        ),
      body: Container(
          margin: const EdgeInsets.only(top: 10),
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,

                children: [
                  Container(
                    margin: const EdgeInsets.only(left: 25, top: 50, right: 25),
                    child:_inputField('UserName', Colors.white),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 25, top: 10, right: 25),
                    child: _inputField('Password', Colors.white),
                  ),
                  Container(
                    margin: const EdgeInsets.only( top: 15),
                    child: Text('Forgot Password?', style: TextStyle(color: Colors.white),),
                  ),
                  Container(
                    margin: const EdgeInsets.only( top: 25),
                    child: _buttons('Login', context),
                  ),
                ],
              )
          )
      ),
    );
  }

}

Answer 1

在这种情况下最好使用GridView。供您参考的教程：https://youtu.be/wsPGFdrtj-U

Answer 2

您可以像这样使用分频器：

Column(
    children: <Widget>[
      Container(
        height: 100,
        color: Colors.red,
      ),
      Divider(
        height: 50,
        thickness: 5,
      ),
      Container(
        height: 100,
        color: Colors.blue,
      ),
    ],
  )

如何使用颤动线分隔UI？

2 个答案: