Question

我试图将GestureDetectors放在文本块中的单个短语上。尽管它确实起作用，但我不希望GestureDetector创建新行。我想要的更像是html中的文本链接。类似于以下代码，它给了我3条单独的行，如何获得一行？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

      <!-- Modal -->
      <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
          <div class="modal-content">
            <div class="affix-box"></div>
            <div class="modal-header">
              <h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

编辑：

type Base = {
    name: string,
    age: number
}

type Teacher = Base & {
    teacherId: number,
}

type Student = Base & {
    studentId: number
}

type Person = Student | Teacher;

const person: Person = {
    name: "John",
    age: 20,
    studentId: 000,
    teacherId: 111
}

console.log(person.age); // Works

console.log(person.studentId); // Fails?
console.log(person.teacherId); // Fails?

尽管注释中建议的解决方案产生如下所示：

这就是我想要的：

Answer 1

var underlineStyle = TextStyle(decoration: TextDecoration.underline, color: Colors.black);

// ...

RichText(
  text: TextSpan(
    text: 'Basically what I want is a block of text with certain ',
    style: underlineStyle.copyWith(decoration: TextDecoration.none),
    children: <TextSpan>[
      TextSpan(text: 'elements ', style: underlineStyle),
      TextSpan(text: 'allowing for '),
      TextSpan(text: 'clicks ', style: underlineStyle),
      TextSpan(text: 'or '),
      TextSpan(text: 'drag gestures', style: underlineStyle ),
    ],
  ),
),

Answer 2

如果您使用Row代替Column作为父项，它应该可以工作。

  Row(
            children: [
              Text(
                'This ',
              ),
              GestureDetector(
                onTap: () {
                  doSomething();
                },
                child: Text(
                  'text ',
                ),
              ),
     Expanded( child: 
              Text(
                "should be in one line.",
                 ),),
            ],
          ),

Answer 3

我认为您希望段落中的某些部分具有可点击的文本。

我希望this有帮助。

文本范围内的GestureDetector，没有换行符

3 个答案: