Как структурировать данные таблицы в Flutter - PullRequest
Новая
       102

Как структурировать данные таблицы в Flutter

1 голос
/ 28 апреля 2020

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

Это конечный результат, которого я до сих пор достиг, используя эту кодовую стратегию. Кто-нибудь может предложить другую стратегию?

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Я сделал решение, работающее с TableRow, структура очень похожа на структуру , сделанную Симоной .

enter image description here

Проверьте это ниже ... 

Container(
    padding: EdgeInsets.all(10),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 5),
          child: Text(
            'How much should I charge?',
            textAlign: TextAlign.left,
            style: TextStyle(
              fontSize: 20.0,
              fontFamily: 'OpenSans',
            ),
          ),
        ),
        Padding(
          child: Text(
            'Currency used for this campaign: USD\$',
            style: TextStyle(
                fontFamily: 'OpenSans', fontSize: 14.0, color: Colors.grey),
          ),
          padding: EdgeInsets.only(bottom: 10),
        ),
        Container(
          child: Table(
            border: TableBorder(
              top: BorderSide(width: 2, color: Colors.grey.shade300),
              verticalInside:
                  BorderSide(width: 1, color: Colors.grey.shade300),
            ),
            children: [
              TableRow(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Padding(
                        child: Text(
                          'IN-FEED POSTS',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.pinkAccent,
                            fontFamily: 'OpenSans',
                          ),
                        ),
                        padding: EdgeInsets.only(top: 10),
                      ),
                      Padding(
                        child: Text(
                          'Followers per account',
                          style: TextStyle(
                            fontSize: 14,
                            fontFamily: 'OpenSans',
                          ),
                        ),
                        padding: EdgeInsets.only(bottom: 10),
                      ),
                    ],
                  ),
                  Container(
                    child: Column(children: <Widget>[
                      Padding(
                        child: Text(
                          'Another text...',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.black,
                            fontFamily: 'OpenSans',
                          ),
                        ),
                        padding: EdgeInsets.only(top: 10),
                      ),
                    ]),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),
1 голос
/ 28 апреля 2020

Я думаю, что самый простой способ - использовать строки и столбцы.

Я не перед P C, вы можете попробовать что-то подобное! 

Column
   Text,
   Text,
    Row
        Container -> border.only 
             Column
                   Text
                   Text
        Container -> border.only
              Column
                   Text
                   Text

Надеюсь, что это поможет.

...