颤振:底部的网格视图力元素

时间:2020-01-08 14:51:30

标签: flutter gridview dart flutter-layout staggered-gridview

我是新手,我正在开发我的第一个应用程序。 我使用的交错网格视图(https://pub.dev/packages/flutter_staggered_grid_view#-readme-tab-)的行为应与普通网格视图类似。

我的设置是:正文:StaggeredGridView.count(crossAxisCount:4 ... 这意味着我可以将4个元素彼此相邻排列。一切正常。

但是现在我想在下一列中强制一个元素并将其放置在中间而不是其他元素的旁边。我该怎么办?

感谢帮助!

   body: StaggeredGridView.count(
    crossAxisCount: 4,
    crossAxisSpacing: 12.0,
    mainAxisSpacing: 12.0,
    padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
    children: <Widget>[
    _buildTile(
        Padding
        (
          padding: const EdgeInsets.all(24.0),
          child: Row
          (
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>
            [
             Material
              (
                child: Padding(
                child: Icon(Icons.store, color: Colors.black54, size: 40.0),
                padding: const EdgeInsets.only(right: 15.0),)
             ),
             Column
              (
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>
                [
                  Text('Test', style: TextStyle(color: Colors.redAccent)),
                  Text('Test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
                ],
              ),
            ]
          ),
        ),
        onTap: () => print('Not set yet'),
      ),
      _buildTile(
        Padding
        (
          padding: const EdgeInsets.all(24.0),
          child: Row
          (
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>
            [
             Material
              (
                child: Padding(
                child: Icon(Icons.store, color: Colors.black54, size: 40.0),
                padding: const EdgeInsets.only(right: 15.0),)
             ),
             Column
              (
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>
                [
                  Text('Test', style: TextStyle(color: Colors.redAccent)),
                  Text('Test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
                ],
              ),
            ]
          ),
        ),
        onTap: () => print('Not set yet'),
      ),
       _buildTile(
        Padding
        (
          padding: const EdgeInsets.all(24.0),
          child: Row
          (
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>
            [
             Material
              (
                child: Padding(
                child: Icon(Icons.store, color: Colors.black54, size: 40.0),
                padding: const EdgeInsets.only(right: 15.0),)
             ),
             Column
              (
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>
                [
                  Text('test', style: TextStyle(color: Colors.redAccent)),
                  Text('test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
                ],
              ),
            ]
          ),
        ),
        onTap: () => print('Not set yet'),
      ),
      _buildTile(
        Padding
        (
          padding: const EdgeInsets.all(24.0),
          child: Column
          (
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center, 
            children: <Widget>
            [
              Material
              (
                color: Colors.teal,
                shape: CircleBorder(),
                child: Center
                (

                   child: Icon(Icons.settings_applications, color: Colors.white, size: 30.0),

                )
              )
            ]
          ),
        ),
      ),
       _buildTile(
        Padding
        (
          padding: const EdgeInsets.all(24.0),
          child: Column
          (
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center, 
            children: <Widget>
            [

              Material
              (
                color: Colors.teal,
                shape: CircleBorder(),
                child: Center
                (

                    child: Icon(Icons.settings_applications, color: Colors.white, size: 30.0),

                )
              )
            ]
          ),
        ),
      ),
     //THIS IS THE ELEMENT I WANT TO FORCE TO THE NEXT COLUMN AND CENTER
     _buildTile(QrImage(data: "1234567890", version: QrVersions.auto, size: 200.0,),),
      ], 
    staggeredTiles: [
      StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
      StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
      StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
      StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
      StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),      
      StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),      
    ],
  ),
);
}

Widget _buildTile(Widget child, {Function() onTap}) {
return Material(
  elevation: 14.0,
  borderRadius: BorderRadius.circular(12.0),
  shadowColor: Color(0x802196F3),
  child: InkWell
  (
    // Do onTap() if it isn't null, otherwise do print()
    onTap: onTap != null ? () => onTap() : () { print('${MediaQuery.of(context).padding.top}'); },
    child: child
  )
);
 }
  }

0 个答案:

没有答案