Связать страницы с rowCell в Flutter

Question

У меня есть два rowCell внутри виджета Row в моем приложении, и я хочу назначить им разные страницы. Я попытался поместить rowCell в GestureDetector, FlatButton, но ни один из них не работал (так как они должны быть связаны с виджетом Row, и им нужны отдельные ссылки для отдельных страниц.)

Вот часть мой код:

  ...
  new Divider(
                height: _height / 20,
                color: Colors.grey,
              ),
              new Row(
                children: <Widget>[
                  rowCell(10250, 'MEETUPS'),
                  rowCell(1520, 'FRIENDS'),
                ],
              ),
              new Divider(height: _height / 20, color: Colors.grey),
  ...

Какие-нибудь решения?

Answer 1

Из приведенного выше комментария, я полагаю, ваша функция rowCell возвращает виджет Expanded.

Так что в функции rowCell внутри виджета Expanded добавляется виджет Inkwell. Также добавьте еще один аргумент, который сообщает странице, на которую вы хотите перейти (onTap).

Widget rowCell(int count, String title, Widget navTo){
  return Expanded(
    child: Inkwell(
      onTap: () => _navToPage(navTo)
      child: .... //Your child widget 
    ),
  );
}

void _navToPage(Widget navTo){
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => navTo,
    ),
  );
}

    new Divider(height: _height / 20, color: Colors.grey),
    new Row(
        children: <Widget>[
            GestureDetector(onTap: () {}, child: rowCell(10250, 'MEETUPS', MeetupsPage())),
            GestureDetector(onTap: (){},child: rowCell(1520, 'FRIENDS', FriendsListPage())),
        ],
    ),
    new Divider(height: _height / 20, color: Colors.grey),

Answer 2

GestureDetector, вероятно, не работает, потому что вы оборачиваете его вокруг текста, и в этом случае он редко работает, потому что пространство onTap относительно пространства, которое покрывает текст на экране.

Попробуйте добавить несколько отступов внутри rowCell, а затем оберните его детектором жестов, это, вероятно, нарушит ваш макет, но, по крайней мере, вы узнаете проблему и отрегулируете соответствующим образом.

Answer 3

Пожалуйста, попробуйте это ...

Если rowCell является возвращаемым виджетом, оберните rowCell с помощью GestureDetector и получите щелчок ...

...

new Divider(
            height: _height / 20,
            color: Colors.grey,
          ),
          new Row(
            children: <Widget>[
                GestureDetector(onTap: () {}, child: rowCell(10250, 'MEETUPS')),
                GestureDetector(onTap: (){},child: rowCell(1520, 'FRIENDS')),
            ],
          ),
          new Divider(height: _height / 20, color: Colors.grey),

...

Answer 4

Просто оберните rowCell с GestureDetector, и вы получите отдельную функцию onTap с тем же дизайном.

В противном случае вы можете использовать GestureDetector внутри rowCell(). И передать функцию в rowCell() для присоединения к GestureDetector.

Widget rowSell(<your parameters>, Function onTapFunction) {
  return GestureDetector(
        onTap: onTapFunction,
        child: <Your child>
      ),
}

И передать функцию как:

new Row(
       children: <Widget>[
         rowCell(10250, 'MEETUPS', (){ <on Tap code> }),
         rowCell(1520, 'FRIENDS', (){ <on Tap code> }),
       ],
 ),