如何水平添加容器——flutter

Question

我想知道使用什么可以添加容器并排添加，两个在一行上，但是第一个已经创建了，我目前有一个布局有问题，我必须使用什么才能让它像这样工作，它在屏幕截图中怎么样？

我想使用 Wrap 或 Grid.builder 但这可以吗？每一个提示对我来说都是非常有用的。

  class _ViewState extends State<View_3> {
  @override
 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    leading: IconButton(
      icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
      onPressed: () => Navigator.of(context).pop(),
    ),
  ),
  body: _createPage(context),
);
}

  Widget _createPage(BuildContext context) {
return SafeArea(
  child: Align(
    child: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: 10),
           all(context)
        ],
      ),
    ),
  ),
);

 }
 // widget which ll contain photo from another screen
  int x = 60;
  List<Widget> a = [
Container(
  height: 150,
  margin: EdgeInsets.all(100.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.orangeAccent, width: 3),
    color: Colors.white,
    borderRadius: BorderRadius.circular(20.0),
  ),
),
  ];
//for create new containers
void _d() {
setState(() {
  a.add( Container(
    height: 150,
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.orangeAccent, width: 3),
      color: Colors.white,
      borderRadius: BorderRadius.circular(20.0),
    ),
  ),);
  });
   }

 Widget all(BuildContext context) {
 return Center(
    child: Wrap(
      spacing: 8.0,
      // line interval
      runSpacing: 8.0,
  children: <Widget>[

    Flexible(
      child: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: a.length,
          itemBuilder: (context, index) {
            return a[index];
          }),
    ),
    FloatingActionButton(
      child: const Icon(Icons.add),
      onPressed: _d,

    ),
  ],
));
}

Answer 1

你可以按照这个思路：

在网格视图中，“获取”第一个元素：

if (index == 0) {...}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200,
              childAspectRatio: 3 / 2,
              crossAxisSpacing: 20,
              mainAxisSpacing: 20),
          itemCount: 10,
          itemBuilder: (BuildContext ctx, index) {
            //The first item
            if (index == 0) {
              return Container(
                alignment: Alignment.center,
                child: Icon(Icons.add),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.orange, width: 2),
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15),
                ),
              );
            }
            //All others items
            return Container(
              alignment: Alignment.center,
              child: Text("name"),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.orange, width: 2),
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
              ),
            );
          },
        ),
      ),
    );
  }
}

结果：

Answer 2

我相信这对你有用。

 Widget _createPage(BuildContext context) {
    return SafeArea(
        child: Padding(
      padding: const EdgeInsets.all(12.0),
      child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 12,
            mainAxisSpacing: 12,
          ),
          itemCount: _numberOfGird + 1,
          itemBuilder: (context, index) {
            if (index == _numberOfGird)

              /// wrapping with row, else full tile will be clickable
              return Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        _numberOfGird += 1;
                      });
                    },
                    child: Container(
                        padding: EdgeInsets.all(25),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.orange,
                        ),
                        child: Icon(
                          Icons.add,
                          color: Colors.white,
                        )),
                  ),
                ],
              );
            else
              return Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(22),
                  border: Border.all(
                    color: Colors.orange,
                    width: 2,
                  ),
                ),
              );
          }),
    )

       
  }

如何水平添加容器——flutter

How to add containers horizontally - flutter

dart

flutter

flutter-dependencies

flutter-layout

flutter-animation