flutter - FLUTTER 如何在附加的法师中创建设计

Question

有了颤振，我想创建以下设计。居中的顶部标题并不那么重要。

如何创建如下图所示的设计。

使用堆栈会很好。

标签： flutterdart

Answer 1

试试这个：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 25),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('SOME CENTERED TITLE'),
              SizedBox(
                height: 10,
              ),
              Container(
                height: 300,
                padding: EdgeInsets.only(left: 5),
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.black,
                    width: 4,
                  ),
                ),
                child: Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        height: 60,
                        width: 120,
                        color: Colors.black,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text('SOME CENTERED TEXT'),
                    SizedBox(
                      height: 20,
                    ),
                    Text('SOME ANOTHER TEXT'),
                  ],
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      height: 100,
                      color: Colors.red,
                      child: Center(
                        child: Text('Text'),
                      ),
                    ),
                  ),
                  SizedBox(width: 50),
                  Expanded(
                    child: Container(
                      height: 100,
                      color: Colors.red,
                      child: Center(
                        child: Text('Text'),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：