如何在Flutter中构造表数据

问题描述 投票:1回答:2

Targeted Result

我目前正在尝试在我的代码中创建一个类似于表的结构,并确保有一种比我已经尝试过的方法简单的方法来完成此任务,而这是笨重的并获得不正确的结果。

SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: Stack(
      children: <Widget>[
        Container(
          width: double.infinity,
          height: 750,
          child: Stack(
            children: <Widget>[
              Positioned(
                right: 0,
                top: 0,
                left: 0,
                child: Padding(
                  padding: const EdgeInsets.only(
                    left: 20.0,
                    top: 20.0,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Text(
                      'How much should I charge?',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: 'OpenSans',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Positioned(
          top: 60,
          right: 90,
          left: 0,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 10.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  'Currency used for this campaign: USD\$',
                  style: TextStyle(
                    fontFamily: 'OpenSans',
                    fontSize: 14.0,
                  ),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          top: 90.0,
          left: 3.0,
          right: 3.0,
          child: Padding(
            padding: const EdgeInsets.only(left: 20.0, right: 20.0),
            child: Divider(
              height: 10.0,
              color: Colors.black45,
            ),
          ),
        ),
        Positioned(
          top: 95.0,
          left: 3.0,
          right: 3.0,
          child: Row(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 30.0, right: 30.0),
                    child: Text(
                      'IN-FEED POSTS',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.deepPurpleAccent,
                          fontFamily: 'OpenSans',
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              ),
              Container(
                  height: 60,
                  child: VerticalDivider(color: Colors.black45)),
            ],
          ),
        ),
        Positioned(
          top: 125.0,
          left: 3.0,
          right: 3.0,
          child: Row(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 30.0, right: 30.0),
                    child: Text(
                      'Followers per account',
                      style: TextStyle(
                        fontSize: 14,
                        fontFamily: 'OpenSans',
                      ),
                    ),
                  )
                ],
              ),
              Container(
                  height: 60,
                  child: VerticalDivider(color: Colors.black45)),
            ],
          ),
        ),
      ],
    ),
  ),

This is the final outcome I have so far achieved using this code strategy

这是我到目前为止使用此代码策略所获得的最终结果。谁能建议另一种策略?

flutter flutter-layout flutter-dependencies
2个回答
0
投票
我不在PC前面,您可以尝试使用类似的方法!

0
投票
TableRow
© www.soinside.com 2019 - 2024. All rights reserved.