Question

我需要将某些元素推入或放置在Widget内，主要思想是将它们放置在视图的底部

想法是将蓝色框的元素放置在另一个蓝色框中


class Principal extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;

    final List<String> _listItem = [
      'assets/foto.jpg',
      'assets/foto2.jpg',
      'assets/foto3.png',
      'assets/foto4.jpg',
    ];


    return Stack(
     children: <Widget>[
       Scaffold(
         body: SafeArea(
           child: Stack(
             children: <Widget>[
               _containerImg(context,screenWidth,screenHeight),

               _table(_listItem),

             ],
           ),
         ),
       ),
     ],
    );
  }

  Widget _containerImg(BuildContext context,ScreenWidth,ScreenHeight){
    return  Container(
      height: ScreenHeight,
      width: ScreenWidth,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/480359.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _table(List<String> _listItem){

  return GridView.count(crossAxisCount: 4,
  padding: EdgeInsets.all(5.0),

    crossAxisSpacing: 1.0,
    mainAxisSpacing: 1.0,

    children: _listItem.map((item) =>  Card(
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50.0),
                image: DecorationImage(
                  image: AssetImage(item),
                  fit: BoxFit.cover,
              ),
            ),
          ),
      ),

    ).toList()

  );


  }
}

我留下了代码示例，我试图放置一个SizedBox，并在Widget的中间放置了一个展开的框，但这没有用

Answer 1

class Principal extends StatelessWidget {
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;

final List<String> _listItem = [
  'https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
  'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  'https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
  'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
];

return Scaffold(
  body: SafeArea(
    child: _containerImg(context, screenWidth, screenHeight, _listItem),
  ),
 );
}

Widget _containerImg(
  BuildContext context, ScreenWidth, ScreenHeight, List<String> listItem) {
return Container(
  height: ScreenHeight,
  width: ScreenWidth,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(
          "https://aegis-be.com.sg/wp-content/themes/aegis_theme/images/banner_2.jpg"),
      fit: BoxFit.cover,
    ),
  ),
  alignment: Alignment.bottomCenter,
  child: _table(listItem),
);
}

Widget _table(List<String> _listItem) {
return Wrap(
    verticalDirection: VerticalDirection.up,
    children: _listItem
        .map(
          (item) => Card(
            child: Container(
              height: 80,
              width: 80,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50.0),
                image: DecorationImage(
                  image: NetworkImage(item),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        )
        .toList());
  }
}

颤振位置网格元素

1 个答案: