将 Wrap 小部件与文本一起使用

Question

我正在尝试复制这个设计。

SizedBox(
  width: 330.w,
  child: Wrap(
    children: [
      Transform.scale(
        scale: 1.3,
        child: Checkbox(
          value: false,
          side: const BorderSide(width: 1),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(3.r),
          ),
          onChanged: (bool? value) {},
        ),
      ),
      const Text('Nullam quis risus eget urna mollis ...'),
    ],
  ),
)

因为我希望文本换行并向下流动，所以我使用了 Wrap 小部件。但是 Text 小部件不是从与复选框相同的级别开始的。看起来像这样。

是否有其他方法可以实现此目的？

Answer 1

您可以用一些空格缩进您的初始文本行，然后使用 STACK 小部件将复选框分层放置在您的文本小部件之上，STACK 也允许定位

Answer 2

您可以尝试 RichText、WidgetSpan 和 TextSpan

有代码示例：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            color: Colors.white,
            child: RichText(
              text: TextSpan(
                children: [
                  WidgetSpan(
                    child: SizedBox(
                        height: 20,
                        width: 20,
                        child: Checkbox(
                          value: false,
                          side: const BorderSide(width: 1),
                          onChanged: (bool? value) {},
                        )),
                  ),
                  const TextSpan(
                    text:
                        " Nullam quis risus get urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Done ullamcorper nulla non metus auctor fringilla.",
                  ),
                ],
              ),
            )));
  }
}

会像

Answer 3

这不是完全一样的设计，但是代码很简单：

CheckboxListTile(
    title: const Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
    value: false,
    onChanged: (newValue) { },
    controlAffinity: ListTileControlAffinity.leading,
)

看起来像：

将 Wrap 小部件与文本一起使用

Using Wrap widget with text

word-wrap

flutter

flutter-layout