flutter - 如何在颤动中创建布局

Question

我有一个布局界面，我想在 Flutter 中实现代码。
请给我一个 Flutter 界面中的示例实现布局，如下图所示。请帮我。谢谢你。

这是我的代码：

Widget build(BuildContext context) {

    return new SafeArea(
        child: new Scaffold(
      appBar: AppBar(
        title: const Text('Riwayat'),
      ),
      body: Container(
              child: ListView.builder(
                  itemCount: content.length,
                  itemBuilder: (context, i) {
                    return new ListTile(
                      title: new Column(
                        children: <Widget>[
                          SizedBox(height: 12.0),
                          new Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Expanded(
                                  child: new Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  new Text(
                                    'Transaksi',
                                    style: new TextStyle(
                                        fontSize: 14.0,
                                        color: Colors.black87,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  new Text('12/12/2019'
                                    style: new TextStyle(
                                        fontSize: 12.0,
                                        color: Colors.black54,
                                        fontWeight: FontWeight.normal),
                                  ),
                                ],
                              )),
                            ],
                          ),
                          new Divider(),
                        ],
                      ),
                    );
                  })),
    ));
  }

这个布局

标签： flutterdate-range

Answer 1

您可以使用以下小部件在 Flutter 中构建基本布局：Container、Row 和 Column。还有其他小部件，但这些是基本的。

您可以使用 Container 小部件中的 child 属性来添加 Row 或 Column。您可以使用 Row 和 Column 小部件中的 children 属性来添加其他小部件。您不断嵌套这些小部件，直到您拥有所需的布局。

此处的链接将帮助您入门：

https://flutter.dev/docs/development/ui/layout

下面是一些用于理解行和列的示例代码：

主要飞镖：

import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Home(),
        );
      }
    }

    class Home extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('row column test'),
            ),
            body: TestRowWith3TestColumns()); //replace with TestRow or TestColumn
      }
    }

    class TestRow extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.red,
          child: Row(
            children: <Widget>[
              Container(
                color: Colors.yellow,
                child:Text('row child 1')
              ),
              Container(
                color: Colors.lightGreen,
                child:Text('row child 2'),
              ),
              Container(
                color: Colors.blue,
                child:Text('row child 3'),
              ),
            ],
          ),
        );
      }
    }

    class TestColumn extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.purple,
          child: Column(
            children: <Widget>[
              Container(
                color: Colors.yellow,
                child:Text('column child 1')
              ),
              Container(
                color: Colors.lightGreen,
                child:Text('column child 2'),
              ),
              Container(
                color: Colors.blue,
                child:Text('column child 3'),
              ),
            ],
          ),
        );
      }
    }

    class TestRowWith3TestColumns extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.red,
          child: Row(
            children: <Widget>[
              TestColumn(),
              TestColumn(),
              TestColumn(),
            ],
          ),
        );
      }
    }