flutter - 在颤动中实现这种布局

Question

我试图在颤动中实现这样的目标。我有一个带有这些圆形容器的水平滚动条。如果可滚动中的元素大于 3，我希望这些容器的宽度缩小，如果元素小于 2，它应该根据图像扩展。我想要的和这张图像完全一样，我一直在阅读有关灵活的内容小部件，但是当我将它包装在可滚动的行中时，它会给出特定于布局的问题。任何解决方法来实现这一点？

@override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SingleChildScrollView(
            padding: EdgeInsets.zero,
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                ...List.generate(
                  9,
                  (index) => Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        color: Colors.green,
                      ),
                      height: 100,
                      width: 100,
                    ),
                  ),
                )
              ],
            )),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            ...List.generate(
                2,
                (index) => Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                          height: 100,
                          width: 180,
                          decoration: BoxDecoration(
                              color: Colors.green,
                              borderRadius: BorderRadius.circular(20))),
                    ))
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                  height: 100,
                  width: 350,
                  decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(20))),
            ),
          ],
        )
      ],
    ),
  ),
);
}

上述构建方法产生以下结果。（此处的值是硬编码的，仅用于演示）。列表值将是动态的，所需的结果应该像视频中的那样。我该如何进行？

https://streamable.com/w142je

标签： flutterflutter-layout

Answer 1

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  final String hintText = 'hing';
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  @override
  Widget build(BuildContext context) {
    var list1 = List.filled(2, '2');
    var list2 = List.filled(4, '4');
    var list3 = List.filled(1, '1');

    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            _getList(context, list1),
            _getList(context, list2),
            _getList(context, list3),
          ],
        ),
      ),
    );
  }

  Widget _getList(BuildContext context, List<String> list) {
    bool ownSize = list.length == 2;
    if (ownSize) {
      return SingleChildScrollView(
        padding: EdgeInsets.zero,
        scrollDirection: Axis.horizontal,
        child: Row(
          children: list.map((t) => rowItem(t, 250)).toList(),
        ),
      );
    } else {
      return Row(
        children: list
            .map(
              (t) => Expanded(child: rowItem(t)),
            )
            .toList(),
      );
    }
  }

  Widget rowItem(String text, [double? width]) {
    return Container(
      margin: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.green,
      ),
      height: 100,
      width: width,
      alignment: Alignment.center,
      child: Text(text),
    );
  }
}