翩翩布局-3列

Question

我正试图创建一个类似于附图的简历文档。需要一些关于顶层布局的帮助

会不会是。

container

   children

      column widget

          children

              container (header)

              container (body)

                 children

                     column

                        children

                           row (education)

                           row (experience)

还有，我怎样才能得到这些虚线？

谢谢你的帮助

Answer 1

会是这样的。

container

   children

      column widget

          children

              container (header)

              container (body)

                 child

                     row

                        children

                           column (education)

                           column (experience)

对于破折号线，你可以使用以下插件。翩翩起舞

另一种选择是。

column widget

     children

          Row (header)

          Row (body)

             children

                column (education)

                column (experience)

为了在正文部分实现精确的布局，你可能会想使用到 Expanded 小工具来实现你想要的。

column widget

     children

          Row (header)

          Row (body)

             children

                Expanded [Flex 1]

                     child

                           Container (education)

                Expanded [Flex 2]

                     child

                           Container (experience)

对于 Dash 来工作。

你需要添加 flutter_dash: ^0.0.1 在...之下 dependencies 在pubspec.yaml中

import 'package:flutter/material.dart';
import 'package:flutter_dash/flutter_dash.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (BuildContext context) => MyApp2(),
      },
    );
  }
}

class MyApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.height / 3,
            )
          ],
        ),
        Dash(
            direction: Axis.horizontal,
            length: MediaQuery.of(context).size.width,
            dashLength: 12,
            dashColor: Colors.red),
        Row(
          children: <Widget>[
            Expanded(
              child: Text('Education'),
              flex: 1,
            ),
            Dash(
                direction: Axis.vertical,
                length: (2 *MediaQuery.of(context).size.height) / 3 - MediaQuery.of(context).padding.top,
                dashLength: 12,
                dashColor: Colors.red),
            Expanded(
              child: Text('Experience'),
              flex: 2,
            ),
          ],
        ),
      ],
    );
  }
}

Answer 2

你也可以试试这个。

 ...your document...
    Container(
      child: Column(
        children: <Widget>[
          Container(
            child: ....header....,
              ),
          Container(
            ...body...
            child: Row(
              children: <Widget>[
                Container(
            child: ...education...
                    ),
                Container(
                  child: ...experience...,
                    ),
              ],
            ),
          ),
        ],
      ),
    );